React组件与组件通信

受控组件和非受控组件

受控组件
由React控制的输入表单元素而改变其值的方式，称为受控组件。
比如，给表单元素input绑定一个onChange事件，当input状态发生变化时就会触发onChange事件，从而更新组件的state。
非受控组件
非受控组件指的是，表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值。
在非受控组件中，可以使用一个ref来从DOM获得表单值。

 props和state的区别

props是指组件间传递的一种方式，props自然也可以传递state。由于React的数据流是自上而下的，所以是从父组件向子组件进行传递；另外组件内部的this.props属性是只读的不可修改！

state是组件内部的状态（数据），不能够直接修改，必须要通过setState来改变值的状态，从而达到更新组件内部数据的作用。

父传子通信流程

1. 在父组件中的子组件标签上绑定自定义属性，挂载传递的数据
2. 子组件中props接受传递的数据，直接使用即可

 子传父通信的流程

1. 父组件中子组件标签上绑定一个属性，传递一个方法给子组件
2. 子组件中通过props接受这个方法，直接调用，传递相应的参数即可

非父子组件通信

1. 状态提升(中间人模式)
   React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件,在父组件上改变这个状态然后通过props分发给子组件
2. context状态树传参

context状态树是怎么运行的?

1. 在父组件中我们通过createContext() 创建一个空对象，在父组件的最外层我们使用Provider包裹数据，通过value绑定要传递的对象数据。
2. 在嵌套的子组件中，我们有两种方式获取数据:
   (1) 我们可以使用Customer标签，在标签中绑定一个箭头函数，函数的形参context就是value传递的数据
   (2). class组件中我们可以定义static contextType=context对象，组件中直接使用this.context获取数据。