React 性能优化的那些事儿-六虎

我报名参加金石计划一期应战——瓜分10万奖池，这是我的第1篇文章，点击查看活动概况

要讲清楚功能优化的原理，就需求知道它的宿世此生，需求答复如下的问题：

React 是怎么进行页面烘托的？

形成页面的卡顿的罪魁祸首是什么呢？

咱们为什么需求功能优化？

React 有哪些场景会需求功能优化？

React 自身的功能优化手段？

还有哪些东西能够提高功能呢？

为什么页面会呈现卡顿的现象？

为什么浏览器会呈现页面卡顿的问题？是不是浏览器不够先进？这都 2202 年了，怎么还会有这种问题呢？

实际上问题的本源来源于浏览器的改写机制。

咱们人类眼睛的改写率是 60Hz，浏览器根据人眼的改写率计算出了

1000 Ms / 60 = 16.6ms

也便是说，浏览器要在16.6Ms 进行一次改写，人眼就不会感觉到卡顿，而假设超越这个时刻进行改写，就会感觉到卡顿。

而浏览器的主进程在仅仅需求页面的烘托，还需求做解析履行Js，他们运行在一个进程中。

假设js的在履行的长时刻占用主进程的资源，就会导致没有资源进行页面的烘托改写，从而导致页面的卡顿。

那么这个又和 React 的功能优化又有什么联系呢？

React 到底是在哪里呈现了卡顿？

根据咱们上面的知识，js 长时刻强占浏览器主线程形成无法改写而形成卡顿。

那么 React 的卡顿也是根据这个原因。

React 在render的时分，会根据现有render发生的新的jsx的数据和现有fiberRoot 进行比对，找到不同的当地，然后生成新的workInProgress，从而在挂载阶段把新的workInProgress交给服务器烘托。

在这个过程中，React 为了让底层机制更高效快速，进行了许多的优化处理，如建立使命优先级、异步调度、diff算法、时刻分片等。

整个链路便是了高效快速的完结从数据更新到页面烘托的全体流程。

为了不让递归遍历寻找一切更新节点太大而占用浏览器资源，React 晋级了fiber架构，时刻分片，让其能够增量更新。

为了找出一切的更新节点，建立了diff算法，高效的查找一切的节点。

为了更高效的更新，及时响应用户的操作，设计使命调度优先级。

而咱们的功能优化便是为了不给 React 拖后腿，让其更快，更高效的遍历。

那么功能优化的奥义是什么呢？？

便是操控改写烘托的涉及规模，咱们只让该更新的更新，不该更新的不要更新，让咱们的更新链路尽可能的短的走完，那么页面当然就会及时改写不会卡顿了。

React 有哪些场景会需求功能优化？

父组件改写，而不涉及子组件
组件自己操控自己是否改写
削减涉及规模，无关改写数据不存入state中
兼并 state,削减重复 setState 的操作
怎么更快的完结diff的比较，加速进程

咱们别离从这些场景说一下：

一：父组件改写，而不涉及子组件。

咱们知道 React 在组件改写判定的时分，假设触发改写，那么它会深度遍历一切子组件，查找一切更新的节点，根据新的jsx数据和旧的 fiber ，生成新的workInProgress，从而进行页面烘托。

所以父组件改写的话，子组件必然会跟着改写，但是假设这次的改写，和咱们子组件没有联系呢？怎么削减这种涉及呢？

如下面这样：

export default function Father1 (){
    let [name,setName] = React.useState('');
    return (
        <div>
            <button onClick={()=>setName("获取到的数据")}>点击获取数据</button>
            {name}
            <Children/>
        </div>
    )
}
function Children(){
    return (
        <div>
            这儿是子组件
        </div>
    )
}

运行成果：

能够看到咱们的子组件被涉及了，解决办法有许多，总体来说分为两种。

子组件自己判别是否需求更新 ,典型的便是 PureComponent，shouldComponentUpdate，memo
父组件对子组件做个缓冲判别

第一种：运用 PureComponent

运用 PureComponent 的原理便是它会对state 和props进行浅比较，假设发现并不相同就会更新。

export default function Father1 (){
    let [name,setName] = React.useState('');
    return (
        <div>
            <button onClick={()=>setName("父组件的数据")}>点击改写父组件</button>
            {name}
            <Children1/>
        </div>
    )
}
class Children extends React.PureComponent{
    render() {
        return (
            <div>这儿是子组件</div>
        )
    }
}

履行成果：

实际上PureComponent便是在内部更新的时分调用了会调用如下方法来判别新旧state和props

function shallowEqual(objA: mixed, objB: mixed): boolean {
  if (is(objA, objB)) {
    return true;
  }
  if (
    typeof objA !== 'object' ||
    objA === null ||
    typeof objB !== 'object' ||
    objB === null
  ) {
    return false;
  }
  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);
  if (keysA.length !== keysB.length) {
    return false;
  }
  // Test for A's keys different from B.
  for (let i = 0; i < keysA.length; i++) {
    const currentKey = keysA[i];
    if (
      !hasOwnProperty.call(objB, currentKey) ||
      !is(objA[currentKey], objB[currentKey])
    ) {
      return false;
    }
  }
  return true;
}

它的判别步骤如下：

第一步，首先会直接比较新老 props 或许新老 state 是否持平。假设持平那么不更新组件。
第二步，判别新老 state 或许 props ，有不是目标或许为 null 的，那么直接回来 false ，更新组件。
第三步，经过 Object.keys 将新老 props 或许新老 state 的特点名 key 变成数组，判别数组的长度是否持平，假设不持平，证明有特点添加或许削减，那么更新组件。
第四步，遍历老 props 或许老 state ，判别对应的新 props 或新 state ，有没有与之对应而且持平的（这个持平是浅比较），假设有一个不对应或许不持平，那么直接回来 false ，更新组件。到此为止，浅比较流程完毕， PureComponent 便是这么做烘托节省优化的。

在运用PureComponent时需求留意的细节：

因为PureComponent 运用的是浅比较判别state和props，所以假设咱们在父子组件中，子组件运用PureComponent,在父组件改写的过程中不小心把传给子组件的回调函数变了，就会形成子组件的误触发，这个时分PureComponent就失效了。

细节一：函数组件中，匿名函数，箭头函数和一般函数都会从头声明

下面这些情况都会形成函数的从头声明：

箭头函数

 <Children1 callback={(value)=>setValue(value)}/>

匿名函数

<Children1 callback={function (value){setValue(value)}}/>

一般函数

export default function Father1 (){
    let [name,setName] = React.useState('');
    let [value,setValue] = React.useState('')
    const setData=(value)=>{
        setValue(value)
    }
    return (
        <div>
            <button onClick={()=>setName("父组件的数据"+Math.random())}>点击改写父组件</button>
            {name}
            <Children1 callback={setData}/>
        </div>
    )
}
class Children1 extends React.PureComponent{
    render() {
        return (
            <div>这儿是子组件</div>
        )
    }
}

履行成果：

能够看到子组件的 PureComponent 完全失效了。这个时分就能够运用useMemo或许 useCallback 出马了，利用他们缓冲一份函数，保证不会呈现重复声明就能够了。

export default function Father1 (){
    let [name,setName] = React.useState('');
    let [value,setValue] = React.useState('')
    const setData= React.useCallback((value)=>{
        setValue(value)
    },[])
    return (
        <div>
            <button onClick={()=>setName("父组件的数据"+Math.random())}>点击改写父组件</button>
            {name}
            <Children1 callback={setData}/>
        </div>
    )
}

看成果：

能够看到咱们的子组件这次并没有参加父组件的改写，在React Profiler中也提示，Children1并没有烘托。

细节二：class组件中不运用箭头函数，匿名函数

原理和函数组件中的一样，class 组件中每一次改写都会重复调用render函数，那么render函数中运用的匿名函数，箭头函数就会形成重复改写的问题。

export default class Father extends React.PureComponent{
    constructor(props) {
        super(props);
        this.state = {
            name:"",
            count:"",
        }
    }
    render() {
        return (
            <div>
                <button onClick={()=>this.setState({name:"父组件的数据"+Math.random()})}>点击获取数据</button>
                {this.state.name}
                <Children1 callback={()=>this.setState({count:11})}/>
            </div>
        )
    }
}

履行成果：

而优化这个十分简略，只需求把函数换成一般函数就能够。

export default class Father extends React.PureComponent{
    constructor(props) {
        super(props);
        this.state = {
            name:"",
            count:"",
        }
    }
    setCount=(count)=>{
        this.setState({count})
    }
    render() {
        return (
            <div>
                <button onClick={()=>this.setState({name:"父组件的数据"+Math.random()})}>点击获取数据</button>
                {this.state.name}
                <Children1 callback={this.setCount(111)}/>
            </div>
        )
    }
}

履行成果：

细节三：在 class 组件的render函数中调用bind 函数

这个细节是咱们在class组件中，没有在constructor中进行bind的操作，而是在render函数中，那么因为bind函数的特性，它的每一次调用都会回来一个新的函数，所以相同会形成PureComponent的失效

export default class Father extends React.PureComponent{
    //...
    setCount(count){
        this.setCount({count})
    }
    render() {
        return (
            <div>
                <button onClick={()=>this.setState({name:"父组件的数据"+Math.random()})}>点击获取数据</button>
                {this.state.name}
                <Children1 callback={this.setCount.bind(this,"11111")}/>
            </div>
        )
    }
}

看履行成果：

优化的方法也很简略，把bind操作放在constructor中就能够了。

constructor(props) {
    super(props);
    this.state = {
        name:"",
        count:"",
    }
    this.setCount= this.setCount.bind(this);
}

履行成果就不在此展现了。

而实际上上诉所说的三个细节相同对React.memo有用，它相同也会浅比较传入的props.

第二种：shouldComponentUpdate

class 组件中运用 shouldComponentUpdate 是首要的优化方法，它不仅仅能够判别来自父组件的nextprops，还能够根据nextState和最新的nextContext来决议是否更新。

class Children2 extends React. PureComponent{
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        //判别只要偶数的时分，子组件才会更新
        if(nextProps !== this.props && nextProps.count  % 2 === 0){
            return true;
        }else{
            return false;
        }
    }
    render() {
        return (
            <div>
                只要父组件传入的值等于 2的时分才会更新
                {this.props.count}
            </div>
        )
    }
}

它的用法也是十分简略，便是假设需求更新就回来true，不需求更新就回来false.

第三种：函数组件怎么判别props的改变的更新呢？运用 React.memo函数

React.memo的规则是假设想要复用最终一次烘托成果，就回来true，不想复用就回来false。所以它和shouldComponentUpdate的正好相反，false才会更新，true就回来缓冲。

const Children3 = React.memo(function ({count}){
    return (
        <div>
            只要父组件传入的值是偶数的时分才会更新
            {count}
        </div>
    )
},(prevProps, nextProps)=>{
    if(nextProps.count % 2 === 0){
        return false;
    }else{
        return true;
    }
})

假设咱们不传入第二个函数，而是默许让 React.memo包裹一下，那么它只会对props浅比较一下，并不会有比较state之类的逻辑。

以上三种都是咱们为了应对父组件更新触发子组件，子组件决议是否更新的实现。下面咱们讲一下父组件对子组件缓冲实现的情况：

运用 React.useMemo来实现对子组件的缓冲

看下面这段逻辑，咱们的子组件只关心count数据，当咱们改写name数据的时分，并不会触发改写 Children1子组件，实现了咱们对组件的缓冲操控。

export default function Father1 (){
    let [count,setCount] = React.useState(0);
    let [name,setName] = React.useState(0);
    const render = React.useMemo(()=><Children1 count = {count}/>,[count])
    return (
        <div>
            <button onClick={()=>setCount(++count)}>点击改写count</button>
            <br/>
            <button onClick={()=>setName(++name)}>点击改写name</button>
            <br/>
            {"count"+count}
            <br/>
            {"name"+name}
            <br/>
            {render}
        </div>
    )
}
class Children1 extends React.PureComponent{
    render() {
        return (
            <div>
                子组件只联系count 数据
                {this.props.count}
            </div>
        )
    }
}

履行成果：当咱们点击改写name数据时，能够看到没有子组件参加改写

当咱们点击改写count 数据时，子组件参加了改写

二：组件自己操控自己是否改写

这儿就需求用到上面说到的shouldComponentUpdate以及PureComponent,这儿不再赘述。

三：削减涉及规模，无关改写数据不存入state中

这种场景便是咱们有意识的操控，假设有一个数据咱们在页面上并没有用到它，但是它又和咱们的其他的逻辑有联系，那么咱们就能够把它存储在其他的当地，而不是state中。

场景一：无意义重复调用setState，兼并相关的state

export default class Father extends React.Component{
    state = {
        count:0,
        name:"",
    }
    getData=(count)=>{
        this.setState({count});
        //根据异步获取数据
        setTimeout(()=>{
            this.setState({
                name:"异步获取回来的数据"+count
            })
        },200)
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("烘托次数,",++count,"次")
    }
    render() {
        return (
            <div>
                <button onClick={()=>this.getData(++this.state.count)}>点击获取数据</button>
                {this.state.name}
            </div>
        )
    }
}

React Profiler的履行成果：

能够看到咱们的父组件履行了两次。其间的一次是无意义的先setState保存一次数据，然后又根据这个数据异步获取了数据今后又调用了一次setState，形成了第二次的数据改写.

而解决办法便是把这个数据兼并到异步数据获取完结今后，一起更新到state中。

getData=(count)=>{
        //根据异步获取数据
        setTimeout(()=>{
            this.setState({
                name:"异步获取回来的数据"+count,
                count
            })
        },200)
}

看履行成果：只烘托了一次。

场景二：和页面改写没有相关的数据，不存入state中

实际上咱们发现这个数据在页面上并没有展现，咱们并不需求把他们都存放在state 中，所以咱们能够把这个数据存储在state之外的当地。


export default class Father extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            name:"",
        }
        this.count = 0;
    }
    getData=(count)=>{
        this.count = count;
        //根据异步获取数据
        setTimeout(()=>{
            this.setState({
                name:"异步获取回来的数据"+count,
            })
        },200)
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("烘托次数,",++count,"次")
    }
    render() {
        return (
            <div>
                <button onClick={()=>this.getData(++this.count)}>点击获取数据</button>
                {this.state.name}
            </div>
        )
    }
}

这样的操作并不会影响咱们对它的运用。在class组件中咱们能够把数据存储在this上面，而在Function中，则咱们能够经过利用 useRef 这个 Hooks 来实现相同的效果。

export default function Father1 (){
    let [name,setName] = React.useState('');
    const countContainer = React.useRef(0);
    const getData=(count)=>{
        //根据异步获取数据
        setTimeout(()=>{
            setName("异步获取回来的数据"+count)
            countContainer.current = count++;
        },200)
    }
    return (
        <div>
            <button onClick={()=>getData(++countContainer.current)}>点击获取数据</button>
            {name}
        </div>
    )
}

场景三：经过存入useRef的数据中，防止父子组件的重复改写

假设父组件中有需求用到子组件的数据，子组件需求把数据回到回来给父组件，而假设父组件把这份数据存入到了 state 中，那么父组件改写，子组件也会跟着改写。这种的情况咱们就能够把数据存入到 useRef 中，以防止无意义的改写呈现。或许把数据存入到class的 this 下。

四：兼并 state,削减重复 setState 的操作

兼并 state ,削减重复 setState 的操作,实际上 React现已帮咱们做了，那便是批量更新，在React18 之前的版本中，批量更新只要在 React自己的生命周期或许点击事情中有供给，而异步更新则没有，例如setTimeout，setInternal等。

所以假设咱们想在React18 之前的版本中也想在异步代码添加对批量更新的支持，就能够运用React给咱们供给的api。

import ReactDOM from 'react-dom';
const { unstable_batchedUpdates } = ReactDOM;

运用方法如下：

componentDidMount() {
    setTimeout(()=>{
        unstable_batchedUpdates(()=>{
            this.setState({ number:this.state.number + 1 })
            console.log(this.state.number)
            this.setState({ number:this.state.number + 1})
            console.log(this.state.number)
            this.setState({ number:this.state.number + 1 })
            console.log(this.state.number)
        })
    })
}

而在 React 18中的话，就不需求咱们这样做了，它对settimeout、promise、原生事情、react事情、外部事情处理程序进行自动批量处理。

五：怎么更快的完结diff的比较，加速进程

diff算法便是为了协助咱们找到需求更新的异同点，那么有什么办法能够让咱们的diff算法更快呢？

那便是合理的运用key

diff的调用是在reconcileChildren中的reconcileChildFibers，当没有能够复用current fiber节点时，就会走mountChildFibers，当有的时分就走reconcileChildFibers。

而reconcilerChildFibers的函数中则会针render函数回来的新的jsx数据进行判别，它是否是目标，就会判别它的newChild.$$typeof是否是REACT_ELEMENT_TYPE，假设是就按单节点处理。假设不是持续判别是否是REACT_PORTAL_TYPE或许REACT_LAZY_TYPE。

持续判别它是否为数组，或许可迭代目标。

而在单节点处理函数reconcileSingleElement中，会履行如下逻辑：

经过 key,判别前次更新的时分的 Fiber 节点是否存在对应的 DOM 节点。假设没有则直接走创立流程，新生成一个 Fiber 节点，并回来
假设有，那么就会持续判别，DOM 节点是否能够复用？

假设有，就将前次更新的 Fiber 节点的副本作为本次新生的Fiber 节点并回来

假设没有，那么就标记 DOM 需求被删去，新生成一个 Fiber 节点并回来。

function reconcileSingleElement(
    returnFiber: Fiber,
    currentFirstChild: Fiber | null,
    element: ReactElement
): Fiber {
    const key = element.key; //jsx 虚拟 DOM 回来的数据
    let child = currentFirstChild;//当时的fiber 
    // 首先判别是否存在对应DOM节点
    while (child !== null) {
        // 上一次更新存在DOM节点，接下来判别是否可复用
        // 首先比较key是否相同
        if (child.key === key) {
            // key相同，接下来比较type是否相同
            switch (child.tag) {
                // ...省掉case
                default: {
                    if (child.elementType === element.type) {
                        // type相同则表示能够复用
                        // 回来复用的fiber
                        return existing;
                    }
                    // type不同则跳出switch
                    break;
                }
            }
            // 代码履行到这儿代表：key相同但是type不同
            // 将该fiber及其兄弟fiber标记为删去
            deleteRemainingChildren(returnFiber, child);
            break;
        } else {
            // key不同，将该fiber标记为删去
            deleteChild(returnFiber, child);
        }
        child = child.sibling;
    }
    // 创立新Fiber，并回来 ...省掉
}

从上面的代码就能够看出，React 是怎么判别一个 Fiber 节点是否能够被复用的。

第一步：判别element的 key 和 fiber 的key 是否相同

假设不相同，就会创立新的 Fiber,并回来

第二步：假设相同，就判别element.type和fiber的 type 是否相同，type 便是他们的类型，比方p标签便是p，div 标签便是div.假设 type 不相同，那么就会标识删去。

假设相同，那就能够能够判别能够复用了，回来existing。

而在多节点更新的时分，key的效果则更加重要，React 会经过遍历新旧数据，数组和链表来经过按个判别它们的key和 type 来决议是否复用。

所以咱们需求合理的运用key来加速diff算法的比对和fiber的复用。

那么怎么合理运用key呢。

其实很简略，只需求每一次设置的值和咱们的数据一直就能够了。不要运用数组的下标，这种key和数据没有关联，咱们的数据发生了更新，成果 React 还指望着复用。

还有哪些东西能够提高功能呢？

实际的开发中还有其他的许多场景需求进行优化：

频频输入或许滑动滚动的防抖节省
针对大数据展现的虚拟列表，虚拟表格
针对大数据展现的时刻分片等等等等后边再补充吧！

感谢大佬的文章：

React进阶实践攻略-烘托操控篇

over…

React 性能优化的那些事儿

为什么页面会呈现卡顿的现象？

React 到底是在哪里呈现了卡顿？

React 有哪些场景会需求功能优化？

一：父组件改写，而不涉及子组件。

第一种：运用 PureComponent

在运用PureComponent时需求留意的细节：

细节一：函数组件中，匿名函数，箭头函数和一般函数都会从头声明

箭头函数

匿名函数

一般函数

细节二：class组件中不运用箭头函数，匿名函数

细节三：在 class 组件的render函数中调用bind 函数

第二种：shouldComponentUpdate

第三种：函数组件怎么判别props的改变的更新呢？运用 React.memo函数

运用 React.useMemo来实现对子组件的缓冲

二：组件自己操控自己是否改写

三：削减涉及规模，无关改写数据不存入state中

场景一：无意义重复调用setState，兼并相关的state

场景二：和页面改写没有相关的数据，不存入state中

场景三：经过存入useRef的数据中，防止父子组件的重复改写

四：兼并 state,削减重复 setState 的操作

五：怎么更快的完结diff的比较，加速进程

还有哪些东西能够提高功能呢？

作者信息

推广

React 性能优化的那些事儿

为什么页面会呈现卡顿的现象？

React 到底是在哪里呈现了卡顿？

React 有哪些场景会需求功能优化？

一：父组件改写，而不涉及子组件。

第一种：运用 PureComponent

在运用PureComponent时需求留意的细节：

细节一：函数组件中，匿名函数，箭头函数和一般函数都会从头声明

箭头函数

匿名函数

一般函数

细节二：class组件中不运用箭头函数，匿名函数

细节三：在 class 组件的render函数中调用bind 函数

第二种：shouldComponentUpdate

第三种：函数组件怎么判别props的改变的更新呢？ 运用 React.memo函数

运用 React.useMemo来实现对子组件的缓冲

二：组件自己操控自己是否改写

三：削减涉及规模，无关改写数据不存入state中

场景一：无意义重复调用setState，兼并相关的state

场景二：和页面改写没有相关的数据，不存入state中

场景三：经过存入useRef的数据中，防止父子组件的重复改写

四：兼并 state,削减重复 setState 的操作

五：怎么更快的完结diff的比较，加速进程

还有哪些东西能够提高功能呢？

相关文章

Java死锁问题详解及示例

深入理解 Linux 物理内存分配全链路实现

失眠必读系列——Android系统启动流程

Android-EventBus修改纪实

作者信息

推广

第三种：函数组件怎么判别props的改变的更新呢？运用 React.memo函数