React之常用生命周期

1 一个div的一生

• div 的 create/construct 过程

let div = document.createElement('div')

• 初始化state

div.textContent= 'hi'

• 这是div的mount过程

document.body.appendChild(div)

• 这是div的update过程

div.textContent= 'hi2'

• 这是div的unmount过程

div.remove()

2 常用生命周期

• constructor()---在这里初始化 state
• shouldComponentUpdate()---return false/true 阻止/同意更新
• render()---创建虚拟 DOM
• componentDidMount()---组件已出现在页面
• componentDidUpdate()---组件已更新
• componentWillUnmount()---组件将死

3 constructor

• 初始化props
• 初始化state,但此时不能调用setState
• 用来写bind this

construct(){
this.onClick = this. onClick.bind(this)  //放在constructor里面
}
可以用新语法代替
onClick = ()=> {}  //放在constructor外面
constructor(){...}

• 可不写

4 shouldComponentUpdate

• 返回true表示不阻止UI更新
• 返回false表示阻止UI更新
• 可以用React.PureComponent代替此功能
• 它允许我们手动判断是否要进行组件更新，我们可以根据应用场景灵活地设置返回值，以避免不必要的更新
• 示例

  

5 render

• 展示视图

return (<div>...</div>)

• 只能有一个根元素
• 如果有两个根元素，就要用<React.Fragment>包起
• <React.Fragment/> 可以缩写成 <></>
• render 里面可以写 if...else
• render里面可以写？:表达式
• render里面不能直接写for循环，需要用数组
• render里面可以写array.map (循环)

6 componentDidMount

• 在元素插入页面后执行代码，这些代码依赖DOM
• 比如你想获取div的高度，就最好在这里写
• 此处可以发起加载数据的AJAX请求(官方推荐)
• 首次渲染会执行此钩子

7 componentDidUpdate

• 在视图更新后执行代码
• 此处也可以发起AJAX请求，用于更新数据（看文档）
• 首次渲染不会执行此钩子
• 在此处setstate可能会引起无限循环，除非放在if里
• 若shouldCom...Update返回false,则不触发此钩子

8 componentWillUnmount

• 组件将要被移出页面然后被销毁时执行代码
• unmount过的组件不会再次mount
• 举例:

如果你在C...DidMount里面监听了 window.scroll
那么你就要在c..WillUnmount里面取消监听
如果你在c..DidMount里面创建了 Timer
那么你就要在c..WillUnmount里面取消Timer
如果你在c..DidMount里面创建了 AJAX请求
那么你就要在c..WillUnmount里面取消请亲
否则你就是菜逼
原则：谁污染谁治理

9 图示