React组件通信

前言

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

一、父子组件通信

1.父组件到子组件

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

function Child(props){
  return <h1>Hello, {props.name}</h1>
}

function Parent(){
  return <Welcome name="Sara" />
}

const element = <Parent />;
ReactDOM.render(
  element,
  document.getElementById('root')
)

2.子组件到父组件

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

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

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

const element = <Parent />;
ReactDOM.render(
  element,
  document.getElementById('root')
)

二、兄弟组件通信

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

function ChildOne(props){
  const [val, setVal] = useState('');
    return (
      <div>
        <input onChange={(e) => setVal(e.target.value)} />
        <button onClick={() => props.change(val)}>向ChildTwo组件传值</button>
      </div>
    );
}

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

function Parent(){
  const [name,setName] = useState('');
  const handleChange = (val) =>{
    setName(val)
  }
  
  return (
    <div>
      <ChildOne change={handleChange}/>
      <ChildTwo name={name}/>
    </div>
  )
}

const element = <Parent />;
ReactDOM.render(
  element,
  document.getElementById('root')
)

三、任意组件通信

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

1.状态共享

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

2.状态管理库

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

总结

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