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、属性校验 -> 聚焦点：子组件接收到父组件传值后进行
网友评论