做前端开发，最让人崩溃的莫过于精心打磨的 React 项目，一上线就卡顿到 “怀疑人生”。用户吐槽体验差，自己改 bug 改到心态炸裂。别慌！今天带来 5 个超冷门却超实用的 React 优化实战技巧，让你的项目性能瞬间逆袭，告别卡顿烦恼！

一、useMemo 深度 “避坑”，告别无效计算

在 React 项目里，很多人都知道用 useMemo 优化性能，但稍不注意就会踩坑。

// useMemo用于缓存计算结果，只有依赖项变化时才重新计算

const expensiveValue = useMemo(() => {

// 模拟一个复杂的计算过程

    return computeExpensiveValue(count, extraData);

}, [count]);

function ParentComponent() {

    const [count, setCount] = useState(0);

    const [extraData, setExtraData] = useState({});

// 错误示范：这里依赖项少写了extraData，当extraData变化时计算结果不会更新

    const expensiveValue = useMemo(() => {

        return computeExpensiveValue(count, extraData);

    }, [count]);

    return (

        <div>

            <p>{expensiveValue}</p>

            <button onClick={() => setCount(count + 1)}>Increment Count</button>

            <button onClick={() => setExtraData({newData: 'changed'})}>Change Extra Data</button>

        </div>

    );

}

正确设置依赖项，才能让 useMemo 发挥真正的威力，避免做无用功。

二、PureComponent 隐藏 “陷阱”，别让优化变 “负优化”

不少人觉得用了 PureComponent 就能高枕无忧，却不知里面暗藏 “陷阱”。

// useMemo用于缓存计算结果，只有依赖项变化时才重新计算

const expensiveValue = useMemo(() => {

// 模拟一个复杂的计算过程

    return computeExpensiveValue(count, extraData);

}, [count]);

function ParentComponent() {

    const [count, setCount] = useState(0);

    const [extraData, setExtraData] = useState({});

// 错误示范：这里依赖项少写了extraData，当extraData变化时计算结果不会更新

    const expensiveValue = useMemo(() => {

        return computeExpensiveValue(count, extraData);

    }, [count]);

    return (

        <div>

            <p>{expensiveValue}</p>

            <button onClick={() => setCount(count + 1)}>Increment Count</button>

            <button onClick={() => setExtraData({newData: 'changed'})}>Change Extra Data</button>

        </div>

    );

}

使用 PureComponent 时，要注意数据结构，不然优化不成反成拖累。

三、事件委托高级玩法，大幅减少内存占用

在 React 中处理大量 dom 事件，内存占用蹭蹭往上涨？试试事件委托高级玩法。

// 在父元素上统一绑定事件，减少子元素的事件绑定数量

function List() {

    const handleClick = (e) => {

// 根据点击的目标判断具体处理逻辑

        if (e.target.tagName === 'LI') {

            console.log('Clicked on list item');

        }

    };

    return (

        <ul onClick={handleClick}>

            {Array.from({length: 100}, (_, i) => (

                <li key={i}>Item {i}</li>

            ))}

        </ul>

    );

}

// 隐藏错误：这里没有考虑事件冒泡过程中可能出现的其他情况，没有做事件终止处理

合理运用事件委托，能有效降低内存消耗，提升页面性能。

四、图片优化 “黑科技”，加载速度提升看得见

图片加载慢，严重影响页面整体体验。这里有几个超实用的优化 “黑科技”。

// 使用next/image组件进行图片优化（假设项目使用Next.js）
import Image from 'next/image';

function ImageComponent() {
    return (
// 错误写法：这里缺少width和height属性，可能导致图片布局错乱
        <Image
            src="/path/to/image.jpg"
            alt="An example image"
        />
    );
}

掌握这些图片优化技巧，让页面加载速度快到飞起。

五、代码分割进阶操作，首屏加载 “快人一步”

代码打包后体积过大，导致首屏加载缓慢？试试代码分割进阶操作。

// Webpack配置进行代码分割
module.exports = {
    entry: {
        main: './src/index.js',
// 错误写法：这里没有对分割后的代码进行合理命名，不利于后期维护
        vendor: ['react', 'react-dom']
    },
    output: {
        filename: '[name].[chunkhash].js',
        path: __dirname + '/dist'
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

做好代码分割，让用户更快看到页面内容。

以上这些 React 优化实战技巧，都是在实际项目中总结出来的。不过，我在代码里故意埋了几处错误，有明显的，也有藏得比较深的。各位前端大神，快来挑战一下，看看你能找出文中明面上的三处错误吗？关于这些优化技巧，你在项目中有什么不一样的实践经验，或者踩过哪些奇葩的坑？欢迎在评论区留言讨论，咱们一起把 React 性能优化玩出新花样！