在 React.js 中，数据是从上自下流动（传递）的，也就是一个父组件可以把它的 state / props 通过 props 传递给它的子组件，但是子组件不能修改 props - React.js 是单向数据流，如果子组件需要修改父组件状态（数据），是通过回调函数方式来完成的。
1.父级向子级通信
把数据添加子组件的属性中，然后子组件中从props属性中，获取父级传递过来的数据。
2.子级向父级通信
在父级中定义相关的数据操作方法(或其他回调), 把该方法传递给子级，在子级中调用该方法父级传递消息。
3.跨组件通信
1.创建context对象
React.createContext(defaultValue);
{ Consumer, Provider } = createContext(defaultValue)
context.js
import {createContext} from "react";
const context = createContext();
const {Provider,Consumer} = context;
export {Provider,Consumer}
export default context;
2.在父组件调用 Provider 传递数据
Context.Provider，使用value传递数据
import { Component } from "react";
import Contatiner from "./container";
import context,{Provider} from "./context";
class App extends Component {
render() {
const {showName,nub} = this.state;
return <div>
<Provider
value={{
showName,nub
}}
>
<Contatiner />
</Provider>
</div>
}
}
export default App;
3.接收数据
方法一：使用类属性contextType
class.contextType = Context;
static contextType = Context;
从this.context中获取;
import { Component } from "react";
import context from "./context";
class Name extends Component {
static contextType = context;
render(){
const {showName} = this.context;
return <>
<p>{showName}</p>
</>
}
}
export default Name;
方法二：使用Consumer
Context.Consumer，从参数中获取
import { Component } from "react";
import {Consumer} from "./context";
export default class Nub extends Component {
render(){
return <Consumer>
{({nub})=>{
return <p>{nub}</p>
}}
</Consumer>
}
}
注意：在使用不熟练时，最好不要在项目中使用 context，context一般给第三方库使用
