类组件：
- 需要注意的点是，尽量避免事件处理函数直接返回，如以下写法：
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
// 此语法确保 `handleClick` 内的 `this` 已被绑定。
return (
<button onClick={() => this.handleClick()}>
Click me
</button>
);
}
}
此语法问题在于每次渲染 LoggingButton 时都会创建不同的回调函数。在大多数情况下，这没什么问题，但如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定或使用 class fields 语法来避免这类性能问题
应该用以下写法来写：
1).构造器中绑定
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 为了在回调中使用 `this`，这个绑定是必不可少的
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
2).class fields 语法
class LoggingButton extends React.Component {
// This syntax ensures `this` is bound within handleClick.
handleClick = () => {
console.log('this is:', this);
};
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}
- 使用shouldComponentUpdate()
- 使用React.PureComponent 来代替手写 shouldComponentUpdate
但它只进行浅比较（基本数据类型只比较值，复杂数据类型只比较引用地址），所以当 props 或者 state 某种程度是可变的话，浅比较可能会有遗漏。在给props重新赋值的时候，如果需要引起重新渲染，要赋一个新值，即引用地址需要改变。
函数组件：
- React.memo - HOC（高阶组件）
import React from 'react';
const ChildComponent = React.memo(function({ prop }) {
// 子组件渲染逻辑
});
export default ChildComponent;
也是对props进行浅比较，如果props没有改变，子组件就不重新渲染。当改变数组（对象）类型的props的时候记得返回一个全新的数组（对象），或者如果只在某些props改变的时候需要渲染，可以加上第二个参数(相当于PureComponent和shouldComponentUpdate的结合)，如下，当areEqual为false的时候会触发渲染。
function MyComponent(props) {
/* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
/*
如果把 nextProps 传入 render 方法的返回结果与
将 prevProps 传入 render 方法的返回结果一致则返回 true，
否则返回 false
*/
}
export default React.memo(MyComponent, areEqual);
- useMemo() 进行细粒度性能优化
上面 React.memo() 的使用我们可以发现，最终都是在最外层包装了整个组件，并且需要手动写一个方法比较那些具体的 props 不相同才进行 re-render。
而在某些场景下，我们只是希望 component 的部分不要进行 re-render，而不是整个 component 不要 re-render，也就是要实现局部 Pure 功能。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。
import { Button, Divider } from "antd";
import React, { useState, useMemo } from "react";
const Parent = () => {
const [num, setNum] = useState(0);
const clickHadler = () => {
setNum(num + 1)
}
// 使用 useMemo 缓存计算的结果
const computeResult = useMemo(() => {
for(let i = 0; i < 10000; i++) {
}
console.log('进行了大量计算')
}, [])
return (
<>
{computeResult}
number值: {num}
<Button type='primary' onClick={() => clickHadler()}>
点击计算
</>
);
};
export default Parent;
- useCallback
const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);
把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新。当你把回调函数传递给经过优化的并使用引用相等性去避免非必要渲染（例如 shouldComponentUpdate）的子组件时，它将非常有用。
useCallback(fn, deps) 相当于 useMemo(() => fn, deps)
