React学习笔记五——组件的生命周期

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–构造器

2. getDerivedStateFromProps

3. render–页面渲染

4. componenetDidMount–组件已挂载

更改状态( setState() )和组件接受props时按顺序触发的钩子函数

1. getDerivedStateFromProps

2. shouldComponentUpdate–组件是否更新

3. render–页面渲染

4. getSnapshotBeforeUpdate

5. componentDidUpdate–组件已更新

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。