React——组件通信方式

在React中，组件间的通信是构建应用的根本。
  以下是React中几种常用的组件通信方式：
1. Props（属性）

父组件向子组件通信：父组件可以通过props向子组件传递数据。子组件通过props担当来自父组件的数据。

1. // 父组件
2. function ParentComponent() {
3.   const message = 'Hello from Parent';
4.   return <ChildComponent message={message} />;
5. }
7. // 子组件
8. function ChildComponent(props) {
9.   return <div>{props.message}</div>;
10. }

复制代码

2. 回调函数

子组件向父组件通信：父组件可以通过props向子组件传递一个回调函数。子组件可以调用这个回调函数并传递数据回父组件。

1. // 父组件
2. function ParentComponent() {
3.   function handleData(data) {
4.     console.log(data);
5.   }
7.   return <ChildComponent onData={handleData} />;
8. }
10. // 子组件
11. function ChildComponent(props) {
12.   const data = 'Some data from Child';
13.   props.onData(data); // 调用父组件传递的回调函数，并传递数据
14.   return <div></div>;
15. }

复制代码

3. Context API

跨组件层级通信：当你需要从一个祖先组件向很多层级下的组件传递数据时，可以利用Context API来实现跨组件层级的通信，避免通过每一层手动传递props。

1. // 创建Context
2. const MyContext = React.createContext();
4. // 祖先组件
5. function AncestorComponent() {
6.   return (
7.     <MyContext.Provider value="Data from ancestor">
8.       <ChildComponent />
9.     </MyContext.Provider>
10.   );
11. }
13. // 子组件
14. function ChildComponent() {
15.   return (
16.     <div>
17.       <GrandchildComponent />
18.     </div>
19.   );
20. }
22. // 孙组件
23. function GrandchildComponent() {
24.   return (
25.     <MyContext.Consumer>
26.       {(value) => <div>{value}</div>}
27.     </MyContext.Consumer>
28.   );
29. }

复制代码

4. Redux 或 Context API（对于更复杂的状态管理）

全局状态管理：当应用变得复杂，组件树深且组件间需要共享状态时，可以利用Redux或者利用Context API作为更高级的状态管理解决方案，实现差异组件间的通信。
Redux提供了一个全局的store来存储状态，所有的组件都可以访问到store中的状态，而且可以触发actions来更新状态。
Context API（用于全局状态管理时通常配合利用Reducer）也可以实现类似Redux的全局状态管理功能，但是更加轻量且没有额外的库依靠。
5. 自定义事故（较少利用）

在某些环境下，大概会利用到自定义事故的方式来实现组件间的通信，尤其是在涉及到非父子组件通信的场景。这种方法不是React特有的，而是基于浏览器事故体系。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。