关于javascript:你可能没有关注过的-React-性能优化

说来我也有很久没有更新过分享了，也始终处在温水煮青蛙的状态。因为一些起因加上这个社会真的太卷了，所以我也被迫退出了内卷大军，重温了很多常识，同时的确也发现了本人很多有余，也想借此机会让大家卷起来，毕竟能力是本人。原文链接

对于我明天想写的内容，大部分你其实都能够在 React 官网文档上学习到。那为什么我还是想写？因为作为一个写了差不多有三年的 React 的人，我竟然没有正儿八经的通读过官网文档，我想通知的可能是和我相似的人吧，同时也补充一些我本人的了解和认识。

性能优化这个问题啊，真的是永远都逃不了，是个面试官都要问几句，不过说实话不晓得是 React 做的太好了，还是我做的我的项目都太根底了，根本没遇到过什么性能问题，导致我在很长一段时间内基本不晓得 React 还有很多跟性能优化无关的 API。

先来看个代码，我间接在一个文件里定义多个组件不便大家观看，正式编写代码的时候一个文件就是一个组件。

import React from 'react';

class Test extends React.Component {componentDidUpdate() {console.log('Test componentDidUpdate');
  }

  render() {return <div></div>;}
}

export default class App extends React.Component {constructor(props) {super(props);
    this.state = {count: 0};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {this.setState((state) => ({count: state.count + 1,}));
  }

  handleTestClick() {}

  render() {
    return (
      <div>
        <div>{this.state.count}</div>
        <div onClick={this.handleClick}>click</div>
        <Test onClick={this.handleTestClick} />
      </div>
    );
  }
}

这代码没什么好说的，每次点击 click 更新state，我当初问几个问题，你先思考一下~

每次点击 click 的时候，Test组件会打印 Test componentDidUpdate 吗？
如果我把 Test 组件的 React.Component 替换为React.PureComponent，后果与下面一样吗？如果不一样，为什么？
如果我批改这一行代码 <Test onClick={this.handleTestClick} /> 为<Test onClick={() => {}} />后果又如何？

如同所有的内容都要从这个货色说起，shouldComponentUpdate作为 React 生命周期的一部分，大多数 React 开发者至多还是据说过它的，简略来说在这个函数中返回一个布尔值，React会依据这个布尔值来判断组件是否须要从新渲染。

shouldComponentUpdate接管两个参数，一个是更新后的 props，一个是更新后的state，能够通过比拟两个props 和state来决定是否须要从新渲染组件。

import React from 'react';

class Test extends React.Component {componentDidUpdate() {console.log('Test componentDidUpdate');
  }
    
  // 每次点击 click 都会打印 Test componentDidUpdate
  // 增加这个函数后当 count 没有变动时不会打印 Test componentDidUpdate
  shouldComponentUpdate(nextProps) {if (this.props.count === nextProps.count) {return false;}
    return true;
  }

  render() {return <div></div>;}
}

export default class App extends React.Component {constructor(props) {super(props);
    this.state = {count: 0};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {this.setState((state) => ({count: state.count,}));
  }

  render() {
    return (
      <div>
        <div>{this.state.count}</div>
        <div onClick={this.handleClick}>click</div>
        <Test count={this.state.count} />
      </div>
    );
  }
}

这段代码也算比拟直观的阐明了 shouldComponentUpdate 的用法，为什么要这么做？当只有一个 Test 组件的时候可能影响不大，那如果有一千个乃至一万个 Test 的时候呢，每点击一次 click 就有一千个、一万个 Test 的componentDidUpdate被调用，这就有点夸大了。所以当你在应用循环渲染组件的时候就肯定要留神到这一个点，它可能会成为你利用的瓶颈。

当初咱们来解一下第一个问题，每次点击 click 的时候，Test组件会打印 Test componentDidUpdate 吗？

是的，每次点击 click 的时候，Test组件会打印 Test componentDidUpdate，除非咱们在Test 中定义了 shouldComponentUpdate，同时返回了false 阻止其从新渲染。

对于 React 的这个 API，置信大家也没有那么生疏，依据官网文档的说法 Component 和PureComponent很类似，两者的区别在于 PureComponent 中实现了 shouldComponentUpdate 函数，这也是为什么我说要从 shouldComponentUpdate 说起。

import React from 'react';

class Test extends React.PureComponent {componentDidUpdate() {console.log('Test componentDidUpdate');
  }
    // 谬误的用法
  shouldComponentUpdate(nextProps) {if (this.props.count === nextProps.count) {return false;}
    return true;
  }

  render() {return <div></div>;}
}

如果你在 PureComponent 中又应用了 shouldComponentUpdate 你应该会失去这样一个正告，侧面也通知咱们 PureComponent 曾经实现了 shouldComponentUpdate 这个函数了。

Test has a method called shouldComponentUpdate(). shouldComponentUpdate should not be used when extending React.PureComponent. Please extend React.Component if shouldComponentUpdate is used.

官网文档中说 PureComponent 中以浅层比照 props 和state的形式来实现了这个函数，也就是浅比拟，那什么又是浅比拟呢？能够简略的了解为a === b，这外面还是有一些说头的，不过不在本文探讨范畴内，举两个例子，大家能够自行搜寻了解。

let a = 5;
let b = 5;
let c = {};
let d = {};
console.log(a === b); // true
console.log(c === d); // false

在来看一段因为不当的代码导致的问题，大家肯定要留神这部分的内容。

import React from 'react';

class Test extends React.PureComponent {
  // 依据从 App 中传来的 animal 渲染组件
  // 在 App 中每次点击增加新的动物后, 这里还是原来的 dog
  render() {return <div>Test: {this.props.animal.join(',')}</div>;
  }
}

export default class App extends React.Component {constructor(props) {super(props);
    // 默认为一只狗
    this.state = {animal: ['dog'] };
    this.handleClick = this.handleClick.bind(this);
  }

  // 每次点击把新的值增加进 animal 中
  // 此处有一个 Bug, 因为 animal.push 办法尽管更新了原来的数组
  // 然而他们还是一个数组(这个说法有些奇怪), 指针还是一样的
  // 可能须要读者自行搜寻了解 JS 中根本类型和援用类型的存储形式
  // 所以当 Test 组件接管到新的 animal 时, 通过浅比拟会发现它们其实是一样的
  // 也就意味着 Test 不会从新渲染
  handleClick(val) {const { animal} = this.state;
    animal.push(val)

    this.setState({animal,});
  }

  // 依据 state 中的 animal 渲染组件
  render() {
    return (
      <div>
        <div>App: {this.state.animal.join(',')}</div>
        <div onClick={() => this.handleClick('cat')}>click</div>
        <Test animal={this.state.animal} />
      </div>
    );
  }
}

看到这里置信你应该能解答第二个问题和第三个问题了，不过咱们还是一起再来看看~

问：如果我把 Test 组件的 React.Component 替换为React.PureComponent，后果与下面一样吗？如果不一样，为什么？

答：因为每次传递 props 中的 onClick 都是 App 组件中的 handleTestClick，同时应用了PureComponent，所以每次浅比拟都是统一的，所以不会在打印Test componentDidUpdate 了。

问：如果我批改这一行代码 <Test onClick={this.handleTestClick} /> 为<Test onClick={() => {}} />后果又如何？

答：尽管应用了 PureComponent，然而因为App 每次调用 render 函数的时候都会从新申明一个办法，此办法和上一次传递给 Test 的办法不同，所以每次点击还是会打印Test componentDidUpdate。

除了上述两个 API 以外，其余 API 或多或少只是它们的改版，所以我就放在一起说了。

React.memo在我看来就是 PureComponent 无状态组件版本，如果用的是 class 就用PureComponent，如果用的是无状态组件就用memo。

import React from 'react';

export default React.memo(function Test() {return <div>Test Component</div>;});

// 它也能够接管第二个参数, 相似 shouldComponentUpdate
// 两个参数上次的 props, 和以后的 props
// 不传默认状况它们两个做浅比拟, 传了由你本人管制

留神：此办法返回值与 shouldComponentUpdate 相同，返回值为 true 时不从新渲染组件。

这两个 API 是 React Hook 的一部分，为什么要放在一起说呢？因为它们十分的相似，据官网文档 useCallback(fn, deps) 相当于useMemo(() => fn, deps)。

因为 React Hook，我当初根本很少写class 组件了，起因是什么置信用过的小伙伴都分明，本文不论述这方面的内容，只想再问你一个问题：handleClick办法每次都会从新定义吗？

import React from 'react';

export default function Test() {const handleClick = () => console.log('click');
  return <div onClick={handleClick}>Test</div>
}

答案是会的，不信你能够验证一下。

import React, {useState} from 'react';

// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set
let set = new Set();

export default function App() {const [val, setVal] = useState(0);
  
  // 比照两种形式能够看出区别
  // const handleClick = useCallback(() => console.log('click'), []);
  const handleClick = () => console.log('click');
    
  // set 存的惟一值, 每次都会增加一个新值
  set.add(handleClick);
  console.log(set.size);

  return (
    <div>
      {/* 如果 Test 是个特地简单的组件, handleClick 每次变动都会导致它从新渲染 */}
      <Test onClick={handleClick}>Test</Test>
      <div onClick={() => setVal(val + 1)}>click</div>
    </div>
  );
}

用法和阐明其实从上述的样例能够看出，就不在额定的阐明了。有时候咱们除了函数须要缓存以外，一个值可能也须要，这时候就须要应用useMemo，它们两的区别也在于此，间接看用法。

import React, {useState, useMemo} from 'react';

let set = new Set();

export default function App() {const [val, setVal] = useState(0);
    
  // 比照三种形式能够看出区别
  // const obj = useMemo(() => ({ label: 'Test', value: 'test'}),[]);
  // const obj = 'obj';
  const obj = {label: 'Test', value: 'test'};

  set.add(obj);
  console.log(set.size);

  return (
    <div>
      {/* 如果 Test 是个特地简单的组件, obj 每次变动都会导致它从新渲染 */}
      <Test obj={obj}>Test</Test>
      <div onClick={() => setVal(val + 1)}>click</div>
    </div>
  );
}

这外面又波及到一个 JavaScript 中根本类型和援用类型的区别，与下面浅比拟相似，你能够试试当 obj 等于一个根本类型时候的成果。

最初的最初咱们来说一下Profiler，它是用来测量被其包裹的 DOM 树渲染所带来的开销，帮忙你排查性能瓶颈，间接看用法。

import React, {Profiler, useState} from 'react';

function Test() {return <div>Test</div>;}

const callback = (
  id, // 产生提交的 Profiler 树的“id”phase, // "mount"（如果组件树刚加载）或者 "update"（如果它重渲染了）之一
  actualDuration, // 本次更新 committed 破费的渲染工夫
  baseDuration, // 预计不应用 memoization 的状况下渲染整颗子树须要的工夫
  startTime, // 本次更新中 React 开始渲染的工夫
  commitTime, // 本次更新中 React committed 的工夫
  interactions // 属于本次更新的 interactions 的汇合
) => {
  console.log(
    id,
    phase,
    actualDuration,
    baseDuration,
    startTime,
    commitTime,
    interactions
  );
};

export default function App() {const [val, setVal] = useState(0);
  return (
    <div>
      <Profiler id="test" onRender={callback}>
        <Test>Test</Test>
      </Profiler>
      <div onClick={() => setVal(val + 1)}>click</div>
    </div>
  );
}

我所晓得的 React 跟性能优化相干的 API 都在下面了，说实话咱们遇到须要性能优化的场景真的太少了，这也是为什么面试官挑人的时候总喜爱问这方面的问题，因为大多数人都没有关注过，咱们想要的也是那一小部分人。所以，多学点常识真的对本人很好，了解更多的内容，你能力更好的了解他人的代码。

关于javascript:你可能没有关注过的-React-性能优化

先说两句

问你几个问题

shouldComponentUpdate

PureComponent

剩点内容补充

memo

useCallback 和 useMemo

Profiler

最初的最初

Just My Socks（注册教程内含优惠码）

关于javascript:你可能没有关注过的-React-性能优化

先说两句

问你几个问题

shouldComponentUpdate

PureComponent

剩点内容补充

memo

useCallback 和 useMemo

Profiler

最初的最初

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）