【 React 】几种共享数据的方式 ！

React与Vue 数据通信相同，属于单向数据流，所以非父子组件共享数据用常规方法，代码会变得非常冗余。所以下面介绍了几种数据共享的方法。

1、React 提供的 Context 类似Vue中的 Provid Reject

初始化：React.createContext() 用来创建共享数据上下文对象 const defaultValue = { a:1, b:2, c:3 } //创建对象并导出 const MyContext = React.createContext(defaultValue) export default = MyContext 应用：有两种用法

第一种，在组建中注册contextType，然后获取

// 底层组件 - class 组件 import Context from "../../" class app extends React.Component { // 指定 contextType 读取当前的 theme context。 render() { const theme = this.context // React 会往上找到最近的 theme Provider，然后使用它的值。 return <div> <p>button's theme is {theme}</p> </div> } } app.contextType = Context // 只有在这里定义了type 才能在组件 用 this.context 获取

第二种，从Context 中结构出 Provider 与 Consumer ，Provider 提供数据 ， Consumer 消费数据

父组件中提供数据源

<Provider value={this.getContext()}> 父组件 fruit = {fruit}, count = {count} <hr /> <Son /> </Provider> //给需要使用数据的组件 套上 从 Context 对象中解构出来的 Provider 之后，可以给一个value 属性，加上之后, //Consumer 消费的数据就是提供的value的值，如果不加，消费默认值。

子组件中消费数据

class Main extends Component { constructor(props) { super(props) this.state = {} } render() { return ( // Consumer 容器,可以拿到父组件传递下来的 fruit 属性, 并可以展示对应的值 <Consumer> //拿到从Context中解构出的Consumer，套在需要消费数据的解构之外，然后里面是一个函数，会自动传入一个参数，这个参数就是 //要消费的数据对象，可以直接用.语法也可以直接解构出要用的数据 {context => ( <div> 子组件 fruit={context.fruit} <hr /> <GrandSon /> </div> )} </Consumer> ) } }

要注意的是，第一种方法，只能有一个contextType生效，而第二种可以无限制的消费，消费多种数据。

2、React 提供的 Render Props 方法

首先来创建一个组件，将来包裹要共享数据的组件。

class ShareData extends Component { state={ a:1, b:2 } render() { return this.props.render(this.state); } } //这个组件的作用就是 将自身的 state 中的属性，传到 props 的 render 函数中当做参数。这个 render 函数 是外部 传进来的。 export default ShareData;

在外部将希望消费数据的组件包裹起来，并添加render 属性，该属性为一个函数，有一个参数，就是上面传过来的state。

<ShareData render={(props) => <Box {...props} />} /> // 然后在结构出来一一当做属性传递给 Box 组件，也就是包裹的组件，即要消费数据的组件。在组件内部就可以通过props获取 ShareData //中的state属性了。

不仅仅可以添加render属性，也可以添加 component属性，值为一个组件对象。

<ShareData component={Box} />

然后在内部进行处理即可。

class ShareData extends Component { state={ a:1, b:2 } render() { //将state解构，并一一赋值给 组件。 this.props.component 的值为一个组件对象。 return <this.props.component { ... this.state } /> } } export default ShareData;

这就是一个简单的render props 的实现。