• 前言
• 一、父子组件通信
• • 1.父组件到子组件
  • 2.子组件到父组件
• 二、兄弟组件通信
• 三、任意组件通信
• • 1.状态共享
  • 2.状态管理库
• 总结

React组件通信主要包括几个方面：父子组件之间的通信、兄弟组件之间的通信、任意组件之间的通信。

Props是父子组件通信中最为常用的一种方式，它可以把数据从父组件传递到子组件中。
注意：子组件取值字段应该和父组件命名字段一致，如下方的name字段

function Child(props){
  return 
Hello, {props.name}
}

function Parent(){
  return 
}

const element = ;
ReactDOM.render(
  element,
  document.getElementById('root')
)

子组件向父组件传值通常需要调用父组件传递过来的回调函数，以此来实现向上传值。

function Child(props){
  return (
    (e) => props.change(e.target.value)}/>
  )
}

function Parent(){
  const handleChange = (val) =>{
    console.log('父组件得到子组件的值为：',val)
  }
  
  return (
    handleChange}/>
  )
}

const element = ;
ReactDOM.render(
  element,
  document.getElementById('root')
)

两个兄弟组件互相传值，通常需要借助父组件作为中间层来传递数据。

function ChildOne(props){
  const [val, setVal] = useState('');
    return (
      

        (e) => setVal(e.target.value)} />
        () => props.change(val)}>向ChildTwo组件传值
      
    );
}

function ChildTwo(props){
  return 
得到ChildOne组件的值：{props.name}
}

function Parent(){
  const [name,setName] = useState('');
  const handleChange = (val) =>{
    setName(val)
  }
  
  return (
    

      handleChange}/>
      name}/>
    
  )
}

const element = ;
ReactDOM.render(
  element,
  document.getElementById('root')
)

除了上述比较简单的组件通信，项目中还会遇到比较复杂的通信情况，比如逐层传值，会出现多层嵌套的情况，通过props层层往下传值，或者通过回调层层往上传值，这种情况是比较复杂且不现实的。再比如互相没有关联的组件之间的通信，组件树互相通信等。这些情况通常需要实现一种状态共享来解决组件之间的通信。

状态共享就是为了解决组件间的“跨级”通信，React中的Context提供了一个无需为每层组件手动添加props，就能在组件树间进行数据传递的方法。去官网文档-Context了解其应用。

React及其生态系统提供了很多不同方式来存储和管理这种状态，主要是将数据存储起来，甚至全局的保留在窗口对象上，对于数据保存在存储中，可以使用第三方库，如Redux、Mobx、Recoil。

本文主要介绍React组件中可能遇到的数据通信问题，希望对你有所帮助~