前端框架 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、子树中运用变与不变分离原则。

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