react 15.0的生命周期
页面第一次加载
componentWillMount 挂载前
render 渲染Dom
componentDidMount 挂载后
页面更新
子组件更新
componentWillReceiveProps 子组件有父组件传过来的值,就会触发这个生命周期
shouldcomponentUpdata 是否更新页面,返回boolean,return false,就不会执行后面的生命周期
componentWillUpdata 更新前
render 渲染Dom
componentDidUpdata 更新后
父组件更新
shouldcomponentUpdata 是否更新页面,返回boolean,return false,就不会执行后面的生命周期
componentWillUpdata 更新前
render 渲染Dom
componentDidUpdata 更新后
页面销毁
componentWillUnmont 页面销毁
=============================================================================
react 16.4和react 15.0 相比删除了几个生命周期,添加了两个生命周期
1. render之前除了shouldComponentUpdata的,其他的生命周期都被删除了,都被getDerivedStateFromProps替代
2. getSnapshotBeforeUpdate 被调用于render之后,可以读取但无法使用DOM的时候。它使您的组件可以在可能更改之前从DOM捕获一些信息(例如滚动位置)。此生命周期返回的任何值都将作为参数传递给componentDidUpdate()。
react为什么会修改生命周期
React Fiber这个大改变Facebook已经折腾两年多了,终于确认,React Fiber会搭上React下一个大版本v16的顺风车发布。
浏览器中的渲染引擎是单线程的,几乎所有的操作都在这个单线程中执行——解析渲染DOM Tree和CSS Tree,解析执行JavaScript——除了网络操作。这个线程就是浏览器的主线程。单线程意味着,一段时间只做一件事,所以浏览器在同一时间内,其主线程只能关注于一个任务。
比如:react要渲染一万条数据,需要6秒,渲染期间,用户在input框输入,这时候react已经占据了浏览器渲染,只能等他6秒后渲染完后,才会渲染用户输入的值,这对于用户体验非常不好。
React Fiber 就是把一万条数据分成拆分成一个个小任务,每次做完一个小任务之后,放弃一下自己的执行将主线程空闲出来,看看有没有其他的任务。如果有的话,就暂停本次任务,执行其他的任务,如果没有的话,就继续下一个任务。
就是因为他会执行多次主线程,就会多次调用挂载前的生命周期,所以会去掉过多的生命周期。