先来看个代码，我直接在一个文件里定义多个组件方便大家观看，正式编写代码的时候一个文件就是一个组件。
import React from ‘react’; class Test extends React.Component { componentDidUpdate() { console.log(‘Test componentDidUpdate’); } render() { return ; } } 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 ( {this.state.count} click ); } }
这代码没什么好说的，每次点击click更新state，我现在问几个问题，你先思考一下~
- 每次点击
click的时候，Test组件会打印Test componentDidUpdate吗？ - 如果我把
Test组件的React.Component替换为React.PureComponent，结果与上面一样吗？如果不一样，为什么？ - 如果我修改这一行代码
<Test onClick={this.handleTestClick} />为<Test onClick={() => {}} />结果又如何？
shouldComponentUpdate
好像所有的内容都要从这个东西说起，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 ; } } 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 ( {this.state.count} click ); } }
这段代码也算比较直观的说明了shouldComponentUpdate的用法，为什么要这么做？当只有一个Test组件的时候可能影响不大，那如果有一千个乃至一万个Test的时候呢，每点击一次click就有一千个、一万个Test的componentDidUpdate被调用，这就有点夸张了。所以当你在使用循环渲染组件的时候就一定要注意到这一个点，它可能会成为你应用的瓶颈。
现在我们来解一下第一个问题，每次点击click的时候，Test组件会打印Test componentDidUpdate吗？
是的，每次点击click的时候，Test组件会打印Test componentDidUpdate，除非我们在Test中定义了shouldComponentUpdate，同时返回了false阻止其重新渲染。
PureComponent
关于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 ; } }
如果你在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 Test: {this.props.animal.join(‘,’)} ; } } 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 ( App: {this.state.animal.join(',')} ); } }
看到这里相信你应该能解答第二个问题和第三个问题了，不过我们还是一起再来看看~
问：如果我把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 或多或少只是它们的改版，所以我就放在一起说了。
memo
React.memo在我看来就是PureComponent无状态组件版本，如果用的是class就用PureComponent，如果用的是无状态组件就用memo。
import React from ‘react’; export default React.memo(function Test() { return Test Component ; }); // 它也可以接收第二个参数, 类似 shouldComponentUpdate // 两个参数上次的props, 和当前的props // 不传默认情况它们两个做浅比较, 传了由你自己控制
