React组件笔记

1.组件

(1).函数组件 ：只有props
（功能组件，视图组件）

(2).类组件 : 包含this、props、refs、state、生命周期
（转改组件，容器组件）

2.组件的传参

(1) 父传子——props

(2) 子传父——props+函数

(3) 兄弟——先传给父，父传兄弟

(4) 跨层级——context（自学）

(5) 全局——redux

3.props特点

(1) props可以是值也可以是函数
props只读

(2)默认props
Counter.defaultProps={属性：默认值，属性2：默认值2}

4.单词

(1) counstructor 构造函数
super调用父类的构造函数

(2)infinite 无限

5.组件的生命周期

<1> 创建

(1) counstuctor 构造函数

(2) static getDerivedStateFromProps(nextProps, prevState)
props更新 nextProps最新的props，prevState之前State 需要返回最新的State

(3) render 渲染

(4) componentDidMount 
        组件挂载完毕
        作用：操作dom，注册事件，开启定时器setTimeout，interval

<2> 更新

(1) static getDerivedStateFromProps

(2) shouldComponentUpdate(nextProps, nextState)
组件是否需要更新，返回true更新，返回false不更新

(3) render 渲染

(4) getSnapshotBeforeUpdate(prevProps, prevState)   
更新前获取快照，返回的数据，cdu的第三个参数

(5) componentDidUpdate 
挂载组件已经更新完毕

<3> 卸载

(1) componentWillUnmount 
组件将要卸载
作用：移除事件监听，停止定时器

6.组件优化

shouldComponentUpdate
pureComponent会自动化       如果props和state没有发生变化则不更新