前端框架 react 性能优化-EW帮帮网

微信交流群：https://732903.hlcode.cn/?id=NK1fWUR

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

二、通过性能优化API优化

1、React.memo

总览：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、子树中运用变与不变分离原则。

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

前端框架 react 性能优化

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

二、通过性能优化API优化

1、React.memo

2、useCallback

3、useMemo

4、PureComponent

三、总结

网站公告

今日签到

热门文章

最新发布

前端框架 react 性能优化

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

二、通过性能优化API优化

1、React.memo

2、useCallback

3、useMemo

4、PureComponent

三、总结​

网站公告

今日签到

热门文章

最新发布

三、总结