前端 - React 中如何优化组件性能？

Question

在项目开发中，React 中如何优化组件性能？

Answer 1

React 中组件性能优化主要涉及减少不必要的渲染和使用合适的生命周期方法。

示例代码：

import React, { memo, useMemo, useCallback } from 'react';

const ExpensiveComponent = memo(({ data }) => {
    return <div>{data}</div>;
});

function ParentComponent() {
    const data = useMemo(() => computeExpensiveValue(), []);
    const handleClick = useCallback(() => {
        // 处理点击事件
    }, []);
    return <ExpensiveComponent data={data} onClick={handleClick} />;
}

口语化解释：memo 可以防止组件在 props 没有变化时重新渲染，useMemo 和 useCallback 可以缓存计算结果和函数，避免每次渲染都重新计算。