React学习笔记五——组件的生命周期，头条前端面试算法

• 组件从创建到死亡会经历一些特定的阶段

• React组件中包含了一系列的钩子函数（生命周期回调函数），会在特定的时刻调用

• 我们在定义组件时，会在特定的生命周期函数中，做特定的工作

组件的生命周期（旧）

=========================================================================

初始化挂载时按顺序触发的钩子函数

1. constructor–构造器

2. componenetWillMount–组件将挂载

3. render–页面渲染

4. componenetDidMount–组件已挂载

更改状态( setState() )时按顺序触发的钩子函数

1. shouldComponentUpdate–组件是否更新

2. componentWillUpdate–组件将更新

3. render–页面渲染

4. componentDidUpdate–组件已更新

强制更改( forceUpdate() )时按顺序触发的钩子函数

1. componentWillUpdate–组件将更新

2. render–页面渲染

3. componentDidUpdate–组件已更新

组件接受props时按顺序触发的钩子函数

1. componentWillReceiveProps–组件将接收props

2. shouldComponentUpdate–组件是否更新

3. componentWillUpdate–组件将更新

4. render–页面渲染

5. componentDidUpdate–组件已更新

卸载时触发的钩子函数

1. componenetWillUnmount–组件将卸载

延申知识点：通过setState()更改状态，但不重新渲染页面？

shouldComponentUpdate(){

return false

}

//此钩子函数返回false后，即使通过setState()更改状态，走到该函数时就结束了，

//不会再往下执行，故不会执行render()函数，页面也不会被重新渲染

组件的生命周期（新）

=========================================================================

更改生命周期背景

React团队一直致力于实现异步渲染，探索中发现以下三个生命周期钩子经常会被误解和滥用；预计在异步渲染中，它们的潜在误用问题可能更大，因此会影响效率和性能，所以在新版本中为这些生命周期添加 “UNSAFE_” 前缀，（这里的 “unsafe” 不是指安全性，而是表示使用这些生命周期的代码在 React 的未来版本中更有可能出现 bug，尤其是在启用异步渲染之后。）

1.componentWillMount

2.componentWillReceiveProps

3.componentWillUpdate

PS:以上三个钩子函数目前在新版本中还可以使用但是要带上“UNSAFE_” 前缀；以后版本可能将会被弃用；

初始化挂载时按顺序触发的钩子函数

1. constructor–构造器

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：docs.qq.com/doc/DSmRnRG…