2 React组件、组件交互、属性校验

1、React组件：

函数组件：视图组件/木偶组件，只做展示使用无逻辑，var TarList = () => {};

非函数组件：聪明组件；

受控组件/非受控组件：可理解为类组件的细分 -> 主要用于表单中，表示"是否通过state控制状态"，非受控组件也会通过state控制状态，只不过做了优化不频繁操作state，优化性能，但是ref属性也不要大量使用(减少虚拟DOM的操作)

<canvas ref="canvas"></canvas>;//this.refs.canvas获取元素 -> 老版本；

类组件中经常涉及：

this.setState({});//批量更新

2、组件交互

(1).父组件向子组件传值：

函数组件使用形参props接收；类组件中使用this.props接收；

(2).子组件向父组件传值：

[1].父组件传函数 -> 子组件 -> 孙子组件 -> ...

[2].Context对象：React.createContext();//Provider,Consumer组件 -> React 16.3版本后支持

Provider组件用于父组件 -> 包裹然后value属性中传值即可

Consumer组件用于接收传值的组件 -> 包裹然后使用箭头函数 ({}) => {}

3、属性校验 -> 聚焦点：子组件接收到父组件传值后进行