React组件间通信用的最多的是props,让子组件接受父组件的数据,或者通过调用父组件的函数以更改父组件的数据,这样是比较方便。
但是我们还考虑到祖孙关系组件通信,props传递不太现实而且中间的组件完全没有意义。
你可能会说了,不是有redux可以做一个全局的状态管理吗?把这个数据直接写进store里面通过最顶层组件向下派发不可以吗?
答案是不一定,使用store存储数据和触发渲染一般要考虑两点,第一,是否是多组件共享数据,第二,是数据卸载后再次挂载,还需要保留之前的状态或者数据吗?如果这两点好像也不满足,那就乖乖选择context吧
实现方式:
1、 React17中即将被废弃,
getChildContext(){
return{xx:vv}
}
return的这个对象在子组件中能被获取,但是必须要声明 childContextType ,
在父组件之外需要规定被向下传递的参数的类型,
Parent.childContextTypes={
xx:PropTypes.string
}
Parent是提供context数据组件的名称
还有
需要在接受参数的子组件之外相应的声明参数的类型,
Child.contextTypes={
xx:PropTypes.string
}
Child是接受context数据的组件的名称
要想使用context的话,这两个type必须都设置并且具有正确的对应关系
2、 React16提供的createContext
Const { Provider, Consumer } = React.createContext(‘default’)