如何低优先级重渲染高耗时的React组件？

下面是两种适配需求的可落地实现方案，你可以根据项目情况选择：

方案1：防抖（debounce）实现（最适配需求） #

这个方案可以精准实现「用户停止输入后再触发慢组件重渲染」的要求，也是开发中最常用的优化方式。

核心思路 #

拆分两个状态：

1. 第一个状态存储表单的实时输入值，这个状态更新只会触发表单UI的响应，不会触发慢组件重渲染
2. 第二个是防抖处理后的状态，只有用户停止输入达到指定时长后才会更新，慢组件仅和这个状态绑定，自然就不会频繁触发重渲染

代码实现 #

首先封装一个通用的自定义防抖Hook：

import { useState, useEffect } from 'react';

/**
 * 自定义防抖Hook
 * @param {any} value 需要防抖的值
 * @param {number} delay 防抖延迟时长，单位ms，默认300
 * @returns 防抖处理后的值
 */
function useDebounce(value, delay = 300) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    // 下一次依赖更新前清除定时器，实现输入过程中不触发更新
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

业务组件中使用：

import { useState, memo } from 'react';

function FormPage() {
  // 存储表单实时输入的状态，更新时仅触发表单UI响应，速度极快
  const [formParams, setFormParams] = useState({
    param1: '',
    param2: '',
    param3: ''
  });
  // 防抖后的参数，用户停止输入500ms后才会更新，时长可自行调整
  const debouncedParams = useDebounce(formParams, 500);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormParams(prev => ({ ...prev, [name]: value }));
  };

  return (
    <div>
      {/* 表单区域 */}
      <input name="param1" value={formParams.param1} onChange={handleInputChange} />
      <input name="param2" value={formParams.param2} onChange={handleInputChange} />
      <input name="param3" value={formParams.param3} onChange={handleInputChange} />
      
      {/* 慢组件仅绑定防抖后的参数，只有防抖参数更新时才会重渲染 */}
      <SlowRenderComponent params={debouncedParams} />
    </div>
  )
}

// 慢组件必须包memo，避免父组件无关更新触发重渲染
const SlowRenderComponent = memo(({ params }) => {
  // 这里放你的耗时渲染逻辑
  return <div>{/* 慢组件的渲染内容 */}</div>
})

注意事项 #

• 必须给慢组件包React.memo，否则父组件更新formParams的时候，就算慢组件的props没有变化，也会被父组件连带触发重渲染，优化就失效了
• 防抖延迟可以根据业务场景调整，300-800ms属于用户无明显感知的区间
• 如果表单参数是引用类型（对象、数组），更新时要生成新的引用，否则防抖Hook的依赖检测不会触发更新

方案2：React 18+ useDeferredValue 实现 #

如果你的项目使用React 18及以上版本，可以用内置的useDeferredValue实现类似效果，它会把参数更新标记为低优先级，不会阻塞UI交互。

和防抖方案的区别 #

不需要等用户完全停止输入，React会在浏览器空闲的时候自动更新慢组件，不会卡住输入交互，但更新频率比防抖方案高，如果你完全不需要实时更新，优先选防抖方案。

代码实现 #

import { useState, useDeferredValue, memo } from 'react';

function FormPage() {
  const [formParams, setFormParams] = useState({/* 表单参数 */});
  // 标记为低优先级的参数
  const deferredParams = useDeferredValue(formParams);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormParams(prev => ({ ...prev, [name]: value }));
  };

  return (
    <div>
      {/* 表单输入不受影响，响应无卡顿 */}
      <input name="param1" value={formParams.param1} onChange={handleInputChange} />
      {/* 慢组件接收低优先级参数 */}
      <SlowRenderComponent params={deferredParams} />
    </div>
  )
}

const SlowRenderComponent = memo(({ params }) => {
  // 耗时渲染逻辑
  return <div>{/* 慢组件内容 */}</div>
})

额外优化建议 #

• 如果慢组件里有大量计算逻辑，可以用useMemo缓存计算结果，进一步减少重渲染耗时
• 如果慢组件渲染慢是因为长列表等内容，可以搭配虚拟滚动组件，只渲染可视区域内容，从根源降低渲染耗时

内容的提问来源于stack exchange，提问作者Alexis Delrieu