前端框架 react 性能优化

目录

一、不使用任何性能优化API进行优化

二、通过性能优化API优化

1、React.memo

2、useCallback

3、useMemo

4、PureComponent

三、总结​

总览：react的优化核心思想就是让react跳过重新渲染那个些没有改变的Component，而只重新渲染发生变化的Component。

所以变化都是围绕这三种变量展开的：props、state、context 。

一、不使用任何性能优化API进行优化

核心思想：将变和不变的部分分离开。

案例一：没有变化的组件被多次渲染了

function App() {const [num, updateNum] = useState(0)return (<div className="App"><input type="text" onChange={(e) => updateNum(+e.target.value)}/><p>num is {num}</p><ExpensiveCpn/></div>);
}const ExpensiveCpn = () => {let now = performance.now()while (performance.now() - now < 100) {}console.log("组件耗时 render")return <div>耗时组件</div>
}

运行结果：可以看到，在上面代码的情况下，高耗能组件虽然没有被修改，但每次修改state里的数据还是都会重新渲染改组件。

下面对其进行优化，即变的部分组件抽离：

function App() {return (<div className="App"><Input/><ExpensiveCpn/></div>);
}const Input = () => {const [num, updateNum] = useState(0)return (<><input type="text" onChange={(e) => updateNum(+e.target.value)}/><p>num is {num}</p></>)
}const ExpensiveCpn = () => {let now = performance.now()while (performance.now() - now < 100) {}console.log("组件耗时 render")return <div>耗时组件</div>
}

页面效果：我们将页面变的部分和不变的部分进行抽离后实现效果：变的组件发生变化时，不会影响我们的其他组件了。

如果你的代码结果写的好，你几乎可以不用性能优化API。

案例二：与案例一类似，不同在于这里父组件也用到了state里的变量。

function App() {const [num, updateNum] = useState(0)return (<div className="App" title={num + ""}><input type="text" onChange={(e) => updateNum(+e.target.value)}/><p>num is {num}</p><ExpensiveCpn/></div>);
}const ExpensiveCpn = () => {let now = performance.now()while (performance.now() - now < 100) {}console.log("组件耗时 render")return <div>耗时组件</div>
}

这段代码和案例一没有优化前的效果一样。

下面我们将对其进行优化：

function App() {return (<InputWrapper><ExpensiveCpn/></InputWrapper>);
}function InputWrapper({children}) {const [num, updateNum] = useState(0)return (<div className="App" title={num + ""}><input type="text" onChange={(e) => updateNum(+e.target.value)}/><p>num is {num}</p>{children}</div>)
}const ExpensiveCpn = () => {let now = performance.now()while (performance.now() - now < 100) {}console.log("组件耗时 render")return <div>耗时组件</div>
}

页面效果：可以看到通过{children}插槽可以实现父元素也有变量时的优化。

从以上两个案例可以得出以下结论：

当父组件满足性能优化条件时，子孙组件可能命中性能优化。

本质是：将变的部分和不变的部分分离。

二、通过性能优化API优化

为什么需要性能优化API：

当子孙结点的父结点未命中性能优化时，父结点的分支也将不会命中性能优化。

1、React.memo

官方文档：memo – React 中文文档

React.memo是一个高阶组件，它接收另一个组件作为参数，会返回一个包装过的新组件，包装后的新组件就会具有缓存作用。

包装后，只有组件的props发生变化，才会触发组件的重新渲染，否则总是返回缓存中的结果。

案例一：

function App() {console.log("App发生渲染")const [count, setCount] = useState(1)return (<><div className="App"><Son/><p>{count}</p><button onClick={() => setCount(count => ++count)}>点击加1</button></div></>);
}const Son = () => {console.log("Son发生渲染")return <div><p>son</p><GrandSon/></div>
}const GrandSon = () => {console.log("GrandSon发生渲染")return <div><p>GrandSon</p></div>
}

实现效果：每次修改App里的数据，子孙组件都发生了改变。

案例二：

对案例一进行优化：

function App() {console.log("App发生渲染")const [count, setCount] = useState(1)return (<><div className="App"><Son/><p>{count}</p><button onClick={() => setCount(count => ++count)}>点击加1</button></div></>);
}const Son = React.memo(() => {console.log("Son发生渲染")return <div><p>son</p><GrandSon/></div>
})const GrandSon = () => {console.log("GrandSon发生渲染")return <div><p>GrandSon</p></div>
}

实现效果：可以看到，当Son组件被memo包裹时，Son一系列数下的组件都被缓存优化到了。每次修改父组件，子孙组件都未重新渲染。

 案例三：

在App组件中，像子组件Son传入修改参数的setCount函数。

function App() {console.log("App发生渲染")const [count, setCount] = useState(1)const addOne = () => {setCount(count => ++count)}return (<><div className="App"><Son addOne={addOne}/><p>{count}</p><button onClick={addOne}>点击加1</button></div></>);
}const Son = React.memo(({addOne}) => {console.log("Son发生渲染")return <div><p>son</p><button onClick={addOne}>Son点击加1</button><GrandSon/></div>
})const GrandSon = () => {console.log("GrandSon发生渲染")return <div><p>GrandSon</p></div>
}

实现效果：当Son组件中调用了父组件中的函数时，你会发现React.memo失效了，此时，子孙组件仍然会被重新渲染。因为App组件发生改变重新渲染，addOne函数也会重新定义，此时传入Son组件里的函数就相当于更新了，会使得Son进行重新渲染。但问题是Son里的内容并没有改变，有什么方法可以解决这种情况的问题呢？这就要用到下面介绍的useCallback钩子了。

2、useCallback

 useCallback是一个钩子函数，用来创建React中的回调函数。创建的回调函数不会总在组件重新渲染时重新创建。简单来说，就是对回调函数做了一层缓存。

const cachedFn = useCallback(fn, dependencies)

useCallback的第一个参数是一个回调函数，第二个参数是依赖数组（当依赖数组中的变量发生变化时，回调函数才会重新创建；如果不指定依赖数组，回调函数每次都会重新创建，失去意义）。

注：如果使用时，不传第二个参数，函数仍然会在每次渲染时重新创建，和没使用没什么区别。

案例四：

function App() {console.log("App发生渲染")const [count, setCount] = useState(1)const addOne = useCallback(() => {setCount(count => ++count)},[])  // 这里的函数只会在组件初始化时创建，更新时不会再次创建return (<><div className="App"><Son addOne={addOne}/><p>{count}</p><button onClick={addOne}>点击加1</button></div></>);
}const Son = React.memo(({addOne}) => {console.log("Son发生渲染")return <div><p>son</p><button onClick={addOne}>Son点击加1</button><GrandSon/></div>
})const GrandSon = () => {console.log("GrandSon发生渲染")return <div><p>GrandSon</p></div>
}

实现效果：React.memo案例三中的问题解决了

案例五：

function App() {console.log("App发生渲染")const [count, setCount] = useState(1)const [num, setNum] = useState(1)const addOne = useCallback(() => {setCount(count => count + num)setNum(num => num + 1)}, [num])return (<><div className="App"><Son addOne={addOne}/><p>{count}</p><button onClick={addOne}>点击加1</button></div></>);
}const Son = React.memo(({addOne}) => {console.log("Son发生渲染")return <div><p>son</p><button onClick={addOne}>Son点击加1</button><GrandSon/></div>
})const GrandSon = () => {console.log("GrandSon发生渲染")return <div><p>GrandSon</p></div>
}

实现效果：在依赖数组中数组callback函数中使用到的变化，每当数组中的变量发生改变时，回调函数都会重新定义，执行时机和useEffect依赖数组里是类似的。但案例中这种情况已经失去了优化的初衷。所以，案例五中的情况，尽量不要用useCallback了，使用和不使用效果都一样，还多了一层缓存的耗时操作。

3、useMemo

 相当于Vue里的Computed

与useCallback十分相似，useCallback是用来缓存函数对象，useMemo是用来缓存函数的执行结果。

不使用useMemo的执行效果：

const sum = (a, b) => {console.log("求和执行了")return a + b
}function App() {console.log(sum(1,2))console.log(sum(1,2))return (<><div></div></>);
}

效果：每次调用都会重新执行。

使用了useMemo:

const sum = (a, b) => {console.log("求和执行了")return a + b
}function App() {const result = React.useMemo(() => {return sum(1, 2)})console.log(result)console.log(result)return (<><div></div></>);
}

效果：函数只执行了一次，对于开销很大的函数，使用useMemo可以很好地改善性能。

 当useMemo里传入变量时：

const sum = (a, b) => {console.log("求和执行了")return a + b
}function App() {const [count, setCount] = useState(1)let b = 2// 每次组件渲染时，都会执行// useMemo用于缓存函数的执行结果const result = React.useMemo(() => {return sum(count, b)}, [])useEffect(() => {console.log("count:", count)console.log(result)console.log(result)}, [count])return (<><div><button onClick={() => setCount(prev => prev + 1)}>a加1</button></div></>);
}

打印：可以看到每次执行都是第一次的结果，变量改变也没有重新缓存result。

解决上面问题的方法：

 const result = React.useMemo(() => {
        return sum(count, b)
    }, [count])  // 第二个参数数组中传入对应变量，当变量发生变化时，会重新调用useMemo进行结果缓存更新。

对于上述情况，如果修改过于频繁，就基本使用不到缓存效果，这种情况，不推荐使用useMemo。

另外，useMemo也可以像React.memo一样返回组件缓存：

function App() {const el = useMemo(() => {return <div><p>hello</p></div>}, [])return (<><div>{el}</div></>);
}

4、PureComponent

React.memo的对应。

PureComponent 会对 props 和 state 进行浅层比较。如果它们没有变化，组件将不会重新渲染。
示例：
以下是一个在类组件中使用 PureComponent 的示例，包括数据传递和更新：

import React, { PureComponent } from 'react';class MyComponent extends PureComponent {// 构造函数，初始化状态constructor(props) {super(props);this.state = {count: 0,name: 'Initial Name',};}// 处理点击事件，更新状态handleClick = () => {// 示例 1：更新数字状态this.setState({ count: this.state.count + 1 });// 示例 2：更新字符串状态（如果 name 是从父组件传递的 props 且未变化，不会触发重新渲染）// 假设 name 是从父组件传递的 props，以下更新不会触发重新渲染（如果 name 未变化）// this.setState({ name: this.props.name });};render() {return (<div><p>Count: {this.state.count}</p><p>Name: {this.state.name}</p><button onClick={this.handleClick}>Increment Count</button></div>);}
}// 父组件
class ParentComponent extends React.Component {constructor(props) {super(props);this.state = {name: 'Parent Name',};}handleNameChange = () => {this.setState({ name: 'Updated Name' });};render() {return (<div><MyComponent name={this.state.name} /><button onClick={this.handleNameChange}>Change Name</button></div>);}
}export default ParentComponent;

在这个例子中：

MyComponent 是一个继承自 PureComponent 的类组件。它有一个 count 状态用于数字的递增展示，还有一个 name 状态（也可以是从父组件传递的 props）用于展示字符串。

在 render 方法中，展示了 count 和 name 的值，并有一个按钮用于触发 count 的递增。

ParentComponent 是父组件，它有一个 name 状态，并将其传递给 MyComponent。还有一个按钮用于更改 name 的状态。

PureComponent 会对 props 和 state 进行浅层比较。如果 props 或 state 的引用没有变化，组件将不会重新渲染。在上面的例子中，如果 MyComponent 接收到的 props.name 没有变化，并且 state 中的 count 没有更新，MyComponent 就不会重新渲染。

注意事项：

PureComponent 的浅层比较对于基本数据类型（如数字、字符串、布尔值）是有效的，但对于复杂数据类型（如对象、数组），它只会比较引用。如果对象或数组的内容发生变化，但引用不变，PureComponent 可能不会检测到变化。在这种情况下，可以使用 immutable.js 或手动在 shouldComponentUpdate 中进行深层比较。
如果组件的 props 或 state 变化频繁且计算成本不高，或者需要进行深层比较，可能不需要使用 PureComponent。

三、总结​

性能优化三部曲：

1、寻找项目中性能损耗严重的子树；

2、在子树的根节点使用性能优化API；

3、子树中运用变与不变分离原则。

总结到此，相信你已经掌握了性能优化的精髓。