React Hook useEffect桌面端更新正常 移动端浏览器不生效问题

问题根因 #

你的代码不符合React的状态渲染逻辑，桌面端的渲染调度策略巧合规避了问题，移动端更激进的渲染优化逻辑让bug暴露。核心问题有两个：

1. 你在useEffect中修改普通变量board，useEffect执行时机在组件渲染提交到UI之后，此时修改普通变量不会触发UI重新渲染，完全是无效操作。
2. 列表渲染没有添加唯一key属性，React虚拟DOM diff无法正确定位需要更新的格子，导致局部更新失败。

排查&解决步骤 #

• 删掉useEffect中重复计算board的冗余代码，board直接在render阶段计算即可。hash是Recoil状态，修改后会自动触发组件重渲染，render阶段会自动读取最新hash值计算新的UI。
  修复后的核心逻辑示例：

const Board = () => {
    const x = useRecoilValue(nstate);
    const values = useRecoilValue(nspaces);
    const [hash, setHash] = useRecoilState(nplaces);
    const size = Math.sqrt(values.length);
    const bx = Array.from({ length: Math.ceil(values.length / size) }, (v, i) => values.slice(i * size, i * size + size));
    // 直接在render阶段计算board，hash变化重渲染时会自动更新
    const board = bx.map((row, rowIndex) => 
        <Fleg key={`row-${rowIndex}`}>
            {row.map((cellKey) => 
                <Col key={`cell-${cellKey}`}>
                    <p><img src={getPhoto(hash[cellKey])} alt=""/></p>
                    <p>{Ops(hash, setHash, cellKey)}</p>
                </Col>
            )}
        </Fleg>
    );

    return <>{board}</>;
}

• 确保Recoil状态更新是不可变更新。修改hash时不能直接修改原对象属性，必须返回全新的对象，否则Recoil可能无法检测到状态变更，示例：

// 错误写法
hash['0,0'] = 2;
setHash(hash);

// 正确写法
setHash(prev => ({
  ...prev,
  '0,0': 2
}));

• 排查移动端图片缓存问题。如果同一个格子的图片地址不变但内容变化，移动端浏览器可能直接读取缓存不更新，可以在图片地址后加临时查询参数验证：

<img src={`${getPhoto(hash[cellKey])}?t=${Date.now()}`} alt=""/>

如果加参数后更新正常，说明是图片缓存问题，后续可以通过给不同状态的图片配置不同的文件名、或者调整资源缓存策略解决。

• 排查硬件加速渲染异常。部分移动端WebKit内核浏览器开启硬件加速时会出现局部渲染缓存，可给图片元素添加CSS属性transform: translateZ(0)强制触发重绘验证。

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