react组件通信方式

react组件的通信方式？

• 父组件与子组件之间的通信。
• 父组件通过props向子组件传递数据

  //子组件
  class Child =(props) => {
      return <div>{props.name}</div>
  }
  
  //父组件
  
  class parent = () => {
      <Child name="test" />
  }

   

• 子组件与父组件之间的通信。
• 子组件通过props+回调函数向父组件传递数据。

  //子组件
  class Child = (props) => {
      const add = (value) => {
          props.callback(value);
      }
      return <p onClick={() => add('test')}>+</p> 
  }
  
  //父组件
  class Parent () => {
      const callback = (value) => console.log(value);
      return () {
          <Child callback={callback}  />
      }
  }

• 跨级组件之间的通信。
• 如果使用props从父组件到目标组件进行层层传递，如果组件层级较深，就增加复杂程度，并且props并不是中间件需要的参数。
• 使用context，context就相当于一个大容器，可以把可能多个组件需要的数据全部都放在里面，这样不管嵌套多深，都可以随时获取。对层级过深的久可以使用context。

  const context = createContext();
  
  //  子组件的子组件 
  class GrandChild extends Component {
      render(){
          return (
              <context.Consumer>
                  {
                      name => <h1>我的名字是:{name}</h1>
                  }
              </context.Consumer>
          ) 
      }
  }
  
  //  子组件
  const Child = () =>{
      return (
          <GrandChild/>
      )
  }
  // 父组件
  class Parent extends Component {
        state = {
            name:"test"
        }
        render(){
            const {name} = this.state
            return (
            <context.Provider value={name}>
                <Child></Child>
            </context.Provider> 
            )
        }
  }

   

• 非嵌套关系的组件通信。
• 可以通过redux进行全局状态管理
• 如果是兄弟组件，可以找父级组件，结合父子组件进行通信。