React组件通信（详解）

1.父传子

​
类//父组件  <Son info={info} />
//子组件  const { info } = this.props
​
函数//父组件  <Son info={info} />
//子组件   export default function Son(props) { return()}
        const {info} = props

2.子传父

类//父组件 要绑定一个changeInfo={info => { this.changeInfo(info) }}回调
//子组件  在子组件中通过某个点击事件 触发  this.props.changeInfo(’子组件的数据‘) 这个事件
​
函数//父组件 <Son changeInfo={info => changeInfo(info)} />
​

3.Context跨组件通信

类//祖组件 创建并暴露Context对象 ，并使用 provide包裹
export const { Provider, Consumer } = React.createContext()
        <Provider value={{ username, age }}>
          <Parent />
        </Provider>
//后代组件  导入祖组件中暴露出来的 Consumer
import { Consumer } from './Grandpa'
<Consumer>
        {
          (value) => {
            return (<div className='son' >
              <h3>我是子组件</h3>
              <h4>我接收到的用户名是：{value.username}</h4>
              <h4>我接收到的年龄是：{value.age}</h4>
            </div >)
          }
        }
</Consumer >

函数// 祖组件 创建并暴露Context对象 ，并使用 provide包裹
export const { Provider, Consumer } = React.createContext()
     <Provider value={user}>
        <Parent />
      </Provider>
​
//后代组件
import { Consumer } from './Grandpa'
<Consumer>
  {value => {
          return `${value.username}`
  }
</Consumer>
//可以有多个 Consumer标签存在

4.消息订阅与发布

PubSubJS安装： npm install pubsub-js

类//父组件 import PubSub from 'pubsub-js'
    const token = PubSub.subscribe('changeUser', (msg, user) => {
      setUser(user)
    })
    
//子组件
 const user = { username: 'aDiao', age: 20 }
    function changeUserinfo() {
    PubSub.publish('changeUser', user)
  }
  子组件修改 user的数据

5.Redux

1.通过createStore函数创建Redux store，该函数接受reducer和初始状态作为参数。
2.在组件中通过方法调用 store.dispatch({type:inc,data})
3.store在收到action后，会将其转交给reducer处理，reducer接收两个参数，第一个是初始值(自己在文件中设置)，第二个是传递过来的 action，
4.根据action中 的 type类型 和 传递的荷载信息更新state。
5.在入口文件 使用 store.subscribe(()=>{}) 来检测redux状态改变，并作出实时数据更新