React 组件生命周期

求上进的人,不要总想着靠谁,人都是自私的,自己才是最靠得住的人。

React 中生命周期划时代几个节点,React 16.2 之前处于老的生命周期,之后提出了新的生命周期。而函数式组件在 React 16.8 之前是没有状态和生命周期的,在 React 16.8 版本通过引入 Hooks 使得函数式组件也能有状态和生命周期了。

1. 初始化阶段

1.1 componentWillMount:

组件即将挂载,初始化数据作用,即 render 之前最后一次修改状态的机会。

// 组件即将挂载
componentWillMount() {
  // 初始化数据作用
  console.log("componentWillMount")
}

/* 在 16.2 之后版本使用会出现以下警告 ⚠️⚠️⚠️
  react-dom.development.js:86 Warning: componentWillMount has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

  * Move code with side effects to componentDidMount, and set initial state in the constructor.
  * Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

  Please update the following components: App
  */

// 组件即将挂载 - 强制去掉警告,UNSAFE 提示开发者这是一个不安全的生命周期方法。
UNSAFE_componentWillMount() {
  // 初始化数据作用
  console.log("componentWillMount")
}

componentWillMount 在16.2 之后官方不推荐使用了,这是因为 16.2 的时候 React 发生了一个改变,推出了几个新的生命周期,老的生命周期方法被替代掉了,不推荐使用。 那么为什么 React 要推出新的生命周期呢?

在 React 16.2 中通过对 diff 算法的更新,更加优化它的性能。提出了一个 Fiber 技术(纤维、分片、切片,比线程更小的一种概念)。因为我们传统的 React 它在创建、更新状态之后会创建新的虚拟 Dom 树,会对比老的虚拟 Dom 树,这个过程是同步的,如果数据量比较小还好。如果这个数据量非常多的情况下即组件非常多的情况下(例如:几百个组件),这个时候更新操作,会导致我们浏览器假死、卡顿,这个时候点什么都没有反应,因为它忙着新老虚拟 Dom 的对比,就是它在对比两个超级大的对象,里面包含了很多小对象,这时浏览器无法处理其它事件,所以导致卡顿影响体验。

所以这个东西就是一个边缘化的问题,你的组件达到这样一个程度,它真的会出现假死的情况。所以 React Fiber 技术就是来优化了虚拟 Dom 的 diff 算法,它把创建 Dom 和组件渲染整个过程拆分成了无数个小的分片任务来执行。可以认为这个任务无比的碎片化,这个时候如果有优先级较高的任务就先执行优先级较高的任务。当优先级较低的任务在执行时候突然来了优先级较高的任务,这个时候会打断正在执行的低优先级任务,先执行优先级高的任务。所谓的低优先级任务就是 componentWillMount 中去找哪些节点将要去挂载到页面中,而高优先级任务就是 render 正在渲染,didMount 挂载完成。这个时候我们低优先级的任务(找出那些需要更新的 Dom)这个过程是会被打断的,而我们更新 Dom 这个过程是不能被打断的,只能一鼓作气做完的,而 willMount 很不幸它是处在这个要找出来那些 Dom 是需要被更新的。所以这个过程是可以被打断的,所以可以认为 willMount 在忙着找出那些状态需要更新。因为接下来在 render 中就要开始更新了,didMount 就更新完成了。这个时候 willMount 找是处于低优先级的,而这个时候 render 正在更新,因为碎片化任务,他可能还不是同步的。即某个组件可能处在在找那个状态需要更新,那个 Dom 需要更新,而那边组件已经到了 render 渲染部分了,这个时候就吧低优先级的任务给砍掉了。砍掉怎么办,会保存吗?不会。只能下次再来一遍,再来找那个节点需要更新。所以这个生命周期就可能会触发多次这样一个问题(失去了唯一性),所以这是一个有隐患的生命周期方法,所以这里不推荐使用。

1.2 render

组件正式挂载渲染,只能访问 this.props 和 this.state,不允许修改状态和 Dom 输出。

1.3 componentDidMount

组件挂载完成,成功 render 并渲染完成真实 DOM 之后触发,可以访问、修改 Dom。

componentDidMount() {
  // 数据请求axios
  // 订阅函数调用
  // setInterval
  // 基于创建的完的dom进行初始化时候,例如 BetterScroll 使用
  console.log("componentDidMount")
}

2. 运行中阶段

2.1 componentWillUpdate

组件即将更新,不能修改属性和状态,会造成死循环。非安全被弃用,同 componentWillMount。

// 组件即将更新
componentWillUpdate() {
  console.log("componentWillUpdate")
}

/* 在 16.2 之后版本使用会出现以下警告 ⚠️⚠️⚠️
  react-dom.development.js:86 Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: App
  */

// 组件即将更新 - 强制去掉警告,UNSAFE 提示开发者这是一个不安全的生命周期方法。
 UNSAFE_componentWillUpdate() {
  console.log("componentWillUpdate")
}

2.2 render

组件正式挂载渲染,只能访问 this.props 和 this.state,不允许修改状态和 Dom 输出。

2.3 componentDidUpdate

组件更新完成,成功 render 并渲染完成真实 DOM 之后触发,可以访问、修改 Dom。

// 组件更新完成 - 接收两个行参,老的属性、老的状态
componentDidUpdate(prevProps, prevState) {
  console.log(prevState)
  console.log("componentDidUpdate")
}

2.4 shouldComponentUpdate

scu 控制组件是否应该更新,即是否执行 render 函数。

// 组件是否应该更新?- 接受两个行参,新的属性、新的状态
shouldComponentUpdate(nextProps, nextState) {
  if (JSON.stringify(this.state) !== JSON.stringify(nextState)) {
    return true
  } else {
    return false
  }
}

2.5 componentWillReceiveProps

父组件修改属性触发,非安全被弃用,同 componentWillMount。处在 diff 中第一个阶段,找到哪些需要更新的 Dom。例如:如果父组件连续多次修改属性传递将触发多次 ajax 请求等。

// 父组件修改属性触发,应用在子组件中才有意义
componentWillReceiveProps(nextProps) {
  // 最先获得父组件传来的属性,可以利用属性进行ajax或者逻辑处理
  // 把属性转换为孩子的自己的状态等
}

3. 销毁阶段

3.1 componentWillUnmount

在删除组件之前进行清理操作,比如计时器和事件监听器。

4. 新生命周期

4.1 getDerivedStateFromProps

getDerivedStateFromProps 第一次的初始化组件以及后续的更新过程中(包括自身状态更新以及父传子),返回一个对象作为新的 state,返回 null 则说明不需要在这里更新 state。

在初始化中代替 componentWillMount 。在父传子中能代替 componentWillReceiveProps。

这里不能做异步操作,因为这里 return 是立即返回的。

static getDerivedStateFromProps(nextProps, nextState) {
  console.log("getDerivedStateFromProps")
  return {

  }
}

4.2 getSnapshotBeforeUpdate

getSnapshotBeforeUpdate 取代了 componentDidUpdate,触发时间为 update 发生的时候,在 render之后 Dom 渲染之前返回一个值,作为 componentDidUpdate 的第三个参数。

import React, { Component } from 'react'

export default class App extends Component {
  state = {

  }

  // getDerivedStateFromProps 第一次的初始化组件以及后续的更新过程中(包括自身状态更新以及父传子),返回一个对象作为新的 state,返回 null 则说明不需要在这里更新 state
  // 这里不能做异步操作,因为这里 return 是立即返回的
  static getDerivedStateFromProps(nextProps, nextState) {
    console.log("getDerivedStateFromProps")
    return {

    }
  }

  getSnapshotBeforeUpdate() {
    return 100
  }

  componentDidUpdate(prevProps, prevState, value) {
    console.log(value)
  } 

  render() {
    return (
      <div>
        <button onClick={()=>{
          this.setState({

          })
        }}>修改</button>
      </div>
    )
  }
}

5. React 中性能优化

5.1 shouldComponentUpdate

React 手动优化,控制组件自身或者子组件是否需要更新,尤其在子组件非常多的情况下,需要进行优化。

5.2 PureComponent

React 自动优化,PureComponent 会帮你比较新 props 跟旧的 props,新的 state 和老的 state(值相等,或者对象含有相同的属性、且属性值相等),决定 shouldComponentUpdate 返回 true 或者 false,从而决定要不要呼叫 render function。

注意:如果你的 state 或 props『永远都会变』,那 PureComponent 并不会比较快,因为 shallowEqual 也需要花时间,比如倒计时功能,这就不适合使用 Pure Component 了。

5.3 缓存技术

React.Component 是使用 ES6 classes 方式定义 React 组件的基类:

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

PureComponent 和 memo 仅作为性能优化的方式而存在。但请不要依赖它来“阻止”渲染,因为这会产生 bug。PureComponnet 和 memo 都是通过对 props 值的浅比较来决定该组件是否需要更新的。

2.1 PureComponent (类组件)

React.PureComponent 与 React.Component 很相似。两者的区别在于 React.Component 并未实现 shouldComponentUpdate(),而 React.PureComponent 中以浅层对比 props 和 state 的方式来实现了该函数。
如果赋予 React 组件相同的 props 和 state,render() 函数会渲染相同的内容,那么在某些情况下使用 React.PureComponent 可提高性能。

2.2 memo(函数式组件)

函数组件缓存 memo,为啥起 memo 这个名字?在计算机领城,记记化是一种主要用来提高计算机程序速度的优化技术方案。它将开销较大的函数调用的返回结果存储起来,当同样的输入再次发生时,则这回缓存好的数据,以此提升运算效率。

React.memo 为高阶组件。它与 React.PureComponent 非常相似,但只适用于函数组件,而不适用 class 组件。

const MyComponent = function MyComponent(props) {
  /* 使用 props 渲染 */
};
export default React.memo(MyComponent)

如果你的函数组件在给定相同 props 的情况下渲染相同的结果,那么你可以通过将其包装在 React.memo 中调用,以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下,React 将跳过渲染组件的操作并直接复用最近一次渲染的结果,即组件仅在它的 props 发生改变的时候进行重新渲染。通常来说,在组件树中 React 组件,只要有变化就会走一遍渲染流程。但是 React.memo(),我们可以仅仅让某些组件进行渲染。

React.memo 仅检查 props 变更。如果函数组件被 React.memo 包裹,且其实现中拥有 useState 或 useContext 的 Hook,当 context 发生变化时,它仍会重新渲染。

默认情况下其只会对复杂对象做浅层对比,如果你想要控制对比过程,那么请将自定义的比较函数通过第二个参数传入来实现。

function MyComponent(props) {
  /* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
  
}
export default React.memo(MyComponent, areEqual);

示例:

// 子组件代码:
import React, { memo } from 'react';
const Child = ()=>{
	console.log("2. 子组件渲染了")
	return (<div>子组件</div>)
}
export default Child

// 父组件代码:
import React, { memo } from 'react';
import Child from './Child.jsx'
const Father = ()=>{
	const [name,setName]=React.useState('');
	console.log("1. 父组件渲染了")
	return (<div>
		/* 在input框中输入内容,会走setName导致App组件重新渲染,但是子组件Child也会进行渲染。 */
		父组件:<input type="text" value={name} onChange={ev=>setName(ev.target.value)} />
		<Child />
	</div>)
}
// 子组件代码:
import React, { memo } from 'react';
const Child = ()=>{
	console.log("2. 子组件渲染了")
	return (<div>子组件</div>)
}
export default memo(Child)
// 父组件代码:
import React, { memo } from 'react';
import Child from './Child.jsx'
const Father = ()=>{
	const [name,setName]=React.useState('');
	console.log("1. 父组件渲染了")
	return (<div>
		/* 解决:子组件使用memo包起来 */
		父组件:<input type="text" value={name} onChange={ev=>setName(ev.target.value)} />
		<Child />
	</div>)
}

热门相关:仙碎虚空   婚期一年   染指帝国首席:老公,别闹   试婚100天:夜少,宠上瘾   睡服BOSS:老公,躺下!