你可能没有关注过的 React 性能优化，帮你突破瓶颈

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
);
}
}

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
);
}
}

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 
;
}
}

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(',')}
);
}
}

import React from ‘react’;
export default React.memo(function Test() {
return 
Test Component
;
});
// 它也可以接收第二个参数, 类似 shouldComponentUpdate
// 两个参数上次的props, 和当前的props
// 不传默认情况它们两个做浅比较, 传了由你自己控制