React组建通信方式

### React 组件通信方式 React 中的组件通信是构建高效、可维护应用的核心概念之一。以下是父子组件和兄弟组件通信的详细实现方式。 #### 父子组件通信 在 React 中，父子组件之间的通信主要通过 `props` 和回调函数实现。父组件可以通过 `props` 将数据传递给子组件，而子组件则可以通过回调函数将数据或事件传递回父组件[^2]。 ##### 数据从父组件传递到子组件 父组件可以通过 `props` 将数据传递给子组件。以下是一个示例： ```javascript // 父组件 class Parent extends React.Component { constructor(props) { super(props); this.state = { books: [ { name: "React Guide", price: 30 }, { name: "JavaScript Handbook", price: 40 } ] }; } render() { return ( <div> <h1>书籍列表</h1> <Child books={this.state.books} /> </div> ); } } // 子组件 class Child extends React.Component { render() { const { books } = this.props; return ( <ul> {books.map((book, index) => ( <li key={index}> 名称: {book.name}, 价格: {book.price} </li> ))} </ul> ); } } ``` 在此示例中，父组件通过 `props` 将 `books` 数组传递给子组件[^4]。 ##### 数据从子组件传递到父组件 子组件可以通过回调函数将数据或事件传递回父组件。以下是一个示例： ```javascript // 父组件 class Parent extends React.Component { constructor(props) { super(props); this.state = { message: "" }; this.updateMessage = this.updateMessage.bind(this); } updateMessage(newMessage) { this.setState({ message: newMessage }); } render() { return ( <div> <h1>消息: {this.state.message}</h1> <Child onMessageChange={this.updateMessage} /> </div> ); } } // 子组件 class Child extends React.Component { sendMessage() { const newMessage = "来自子组件的消息"; this.props.onMessageChange(newMessage); } render() { return ( <button onClick={() => this.sendMessage()}> 发送消息给父组件 </button> ); } } ``` 在此示例中，子组件通过调用父组件传递的回调函数 `onMessageChange` 来更新父组件的状态[^2]。 #### 兄弟组件通信 兄弟组件之间的通信可以通过共同的父组件作为中介来实现。父组件可以维护一个共享状态，并通过 `props` 将该状态及其更新方法传递给两个兄弟组件[^3]。 ##### 示例代码 ```javascript // 父组件 class Parent extends React.Component { constructor(props) { super(props); this.state = { sharedData: "" }; this.updateSharedData = this.updateSharedData.bind(this); } updateSharedData(data) { this.setState({ sharedData: data }); } render() { return ( <div> <SiblingA onShare={this.updateSharedData} /> <SiblingB sharedData={this.state.sharedData} /> </div> ); } } // 兄弟组件 A class SiblingA extends React.Component { shareData() { const newData = "来自兄弟组件 A 的数据"; this.props.onShare(newData); } render() { return ( <button onClick={() => this.shareData()}> 分享数据 </button> ); } } // 兄弟组件 B class SiblingB extends React.Component { render() { return <p>接收到的数据: {this.props.sharedData}</p>; } } ``` 在此示例中，兄弟组件 A 通过调用父组件的 `onShare` 方法来更新共享状态，兄弟组件 B 则通过 `props` 接收并显示该共享状态。 #### 高级通信方式 对于更复杂的场景，可以使用 React 的 `Context` API 或者状态管理库（如 Redux、MobX）来实现跨层级的组件通信[^1]。 ##### 使用 Context API ```javascript // 创建 Context const DataContext = React.createContext(); // 父组件 class Parent extends React.Component { state = { data: "全局数据" }; render() { return ( <DataContext.Provider value={this.state.data}> <SiblingA /> <SiblingB /> </DataContext.Provider> ); } } // 兄弟组件 A class SiblingA extends React.Component { render() { return ( <DataContext.Consumer> {(data) => <p>兄弟组件 A 接收到的数据: {data}</p>} </DataContext.Consumer> ); } } // 兄弟组件 B class SiblingB extends React.Component { render() { return ( <DataContext.Consumer> {(data) => <p>兄弟组件 B 接收到的数据: {data}</p>} </DataContext.Consumer> ); } } ``` 在此示例中，`Context` 被用来在不直接通过 `props` 的情况下共享数据[^1]。