Day 13 Component Lifecycle -2

第 13 天啦～～～

昨天我们谈到 lifecycle，

那我们今天来稍微介绍一下，在生命周期每个阶段的流程吧

那在 v15 -> v16 时，

React 官方有针对 lifecycle 做一些调整，

那某些不安全的部份，会在前面多一个 UNSAFE_，

来提醒开发者尽量不要使用

Mounting

元件建立的流程，还未再入到实体网页时

1. constructor

• state 、 function or 其他变数 初始化的地方

1. UNSAFE_componentWillMount

• 在 component 初始化的时候，在 render 执行之前
• 有建立 getDerivedStateFromProps 会失效

3. static getDerivedStateFromProps(nextProps, prevState)

• 在 component 尚未 render 之前，用来与父层的 props 做交接，需回传一个物件，此物件内容会被当做最新的 state
• 这个 function 为 static 固是抓不到当下 component 的 this
• 有建立此 function ， UNSAFE_componentWillMount 会失效

4. render

• 欲要渲染到真实画面前的最後动作，在这里回传 react element ，会根据 react element 的变化，来影响真实画面

5. componentDidMount

• 只会执行一次，在 component 渲染到真实画面之後触发

Updating

元件画面更新的流程，再触发 re-render 会启用

1. UNSAFE_componentWillReceiveProps(nextProps)

• 由父层 props 更新时会被触发
• 有建立 getDerivedStateFromProps 会失效

2. getDerivedStateFromProps
3. shouldComponentUpdate(nextProps, nextState)

• Updating 的流程启动之後，在 render 之前，返回 false or true，来判断是否要进入下一个流程

5. UNSAFE_componentWillUpdate（nextProps, nextState)

• render 之前，最後一动
• 有建立 getDerivedStateFromProps 会失效

6. render
7. getSnapshotBeforeUpdate(prevProps, prevState)

• 真实画面更新之前，当有 return 值，则会带入到 componentDidUpdate

8. componentDidUpdate(prevProps, prevState, snapshot)

• 真实画面更新完之後会被触发
• getSnapshotBeforeUpdate 有返回值则会带入到第三个参数

Unmounting

当 component 要被移除之时

1. componentWillUnmount

• 在 component 要被卸载之前

上面这些就是 React 的生命周期，

基本上，最常用到的应该会是，

componentDidMount & componentDidUpdate，

第一个是在画面初始化结束，要执行相应的动作，

第二个则是在更新後，针对某些值来判断是否要继续执行某些动作

其他的，使用时目前还抓不太准，

假如各位有经验的话欢迎留言喔～