React中组件间通信的方式

React中组件间通信的方式

React中组件间通信包括父子组件、兄弟组件、隔代组件、非嵌套组件之间通信。

Props

props适用于父子组件的通信，props以单向数据流的形式可以很好的完成父子组件的通信，所谓单向数据流，就是数据只能通过props由父组件流向子组件，而子组件并不能通过修改props传过来的数据修改父组件的相应状态，所有的props都使得其父子props之间形成了一个单向下行绑定，父级props的更新会向下流动到子组件中，但是反过来则不行，这样会防止从子组件意外改变父级组件的状态，导致难以理解数据的流向而提高了项目维护难度。实际上如果传入一个基本数据类型给子组件，在子组件中修改这个值的话React中会抛出异常，如果对于子组件传入一个引用类型的对象的话，在子组件中修改是不会出现任何提示的，但这两种情况都属于改变了父子组件的单向数据流，是不符合可维护的设计方式的。
我们通常会有需要更改父组件值的需求，对此我们可以在父组件自定义一个处理接受变化状态的逻辑，然后在子组件中如若相关的状态改变时，就触发父组件的逻辑处理事件，在React中props是能够接受任意的入参，此时我们通过props传递一个函数在子组件触发并且传递值到父组件的实例去修改父组件的state。

<!-- 子组件 --> import React from "react"; class Child extends React.PureComponent{ render() { return ( <> <div>接收父组件的值: {this.props.msg}</div> <button onClick={() => this.props.changeMsg("Changed Msg")}>修改父组件的值</button> </> ) } } export default Child; <!-- 父组件 --> import React from "react"; import Child from "./child"; class Parent extends React.PureComponent{ constructor(props){ super(props); this.state = { msg: "Parent Msg" }; } changeMsg = (msg) => { this.setState({ msg }); } render() { return ( <div> <Child msg={this.state.msg} changeMsg={this.changeMsg} /> </div> ) } } export default Parent; Context

React Context适用于父子组件以及隔代组件通信，React Context提供了一个无需为每层组件手动添加props就能在组件树间进行数据传递的方法。在React应用中数据是通过props属性自上而下即由父及子进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的，这些属性是应用程序中许多组件都需要的，Context提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递props，实际上React-Router就是使用这种方式传递数据，这也解释了为什么<Router>要在所有<Route>的外面。。
使用Context是为了共享那些对于一个组件树而言是全局的数据，简单来说就是在父组件中通过Provider来提供数据，然后在子组件中通过Consumer来取得Provider定义的数据，不论子组件有多深，只要使用了Provider那么就可以取得在Provider中提供的数据，而不是局限于只能从当前父组件的props属性来获取数据，只要在父组件内定义的Provider数据，子组件都可以调用。当然如果只是想避免层层传递props且传递的层数不多的情况下，可以考虑将props进行一个浅拷贝之后将之后组件中不再使用的props删除后利用Spread操作符即{...handledProps}将其展开进行传递，实现类似于Vue的$attrs与$listeners的API操作。

import React from "react"; const createNamedContext = name => { const context = React.createContext(); context.Provider.displayName = `${name}.Provider`; context.Consumer.displayName = `${name}.Consumer`; return context; } const context = /*#__PURE__*/ createNamedContext("Share"); export default context; <!-- 子组件 --> import React from "react"; import ShareContext from "./ShareContext"; class Child extends React.PureComponent{ render() { return ( <> <ShareContext.Consumer> { /* 基于 context 值进行渲染 */ } { value => <div>SharedValue: {value}</div> } </ShareContext.Consumer> </> ) } } export default Child; <!-- 父组件 --> import React from "react"; import Child from "./child"; import ShareContext from "./ShareContext"; class Parent extends React.PureComponent{ constructor(props){ super(props); this.state = { msg: "Parent Msg" }; } render() { return ( <div> <ShareContext.Provider value={100} > <Child msg={this.state.msg} /> </ShareContext.Provider> </div> ) } } export default Parent; Refs

Refs适用于父子组件的通信，Refs提供了一种方式，允许我们访问DOM节点或在render方法中创建的React元素，在典型的React数据流中，props是父组件与子组件交互的唯一方式，要修改一个子组件，你需要使用新的props来重新渲染它，但是在某些情况下，需要在典型数据流之外强制修改子组件，被修改的子组件可能是一个React组件的实例，也可能是一个DOM元素，渲染组件时返回的是组件实例，而渲染DOM元素时返回是具体的DOM节点，React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例。此外需要注意避免使用refs来做任何可以通过声明式实现来完成的事情，通常在可以使用props与state的情况下勿依赖refs。

<!-- 子组件 --> import React from "react"; class Child extends React.PureComponent{ render() { return ( <> <div>接收父组件的值: {this.props.msg}</div> </> ) } } export default Child; <!-- 父组件 --> import React from "react"; import Child from "./child"; class Parent extends React.PureComponent{ constructor(props){ super(props); this.state = { msg: "Parent Msg" }; this.child = React.createRef(); } componentDidMount(){ console.log(this.child.current); // Child {props: {…}, context: {…}, ...} } render() { return ( <div> <Child msg={this.state.msg} ref={this.child} /> </div> ) } } export default Parent; EventBus