强制 React 组件重新渲染

Irakli Tchigladze 2023年1月30日 2021年12月4日
  1. 强制 React 组件使用类组件重新渲染
  2. 强制 React 组件使用函数组件重新渲染
强制 React 组件重新渲染

默认情况下,React 组件会通过其 stateprops 的更改触发重新渲染。大多数时候,如果你遵循 React 的最佳实践,这种行为足以达到预期的结果。

在某些情况下,框架的默认行为是不够的,你需要手动重新渲染组件。在执行此操作之前,请仔细查看代码。强制重新渲染仅在少数情况下是可行的选择。

强制 React 组件使用类组件重新渲染

如果使用得当,调用 React Class Component 的 setState() 方法应该总是触发重新渲染。shouldComponentUpdate() 生命周期可能包含阻止这种行为的条件逻辑。

如果你正在调用 setState() 但组件没有更新,则你的代码可能有问题。确保你有使用 forceUpdate() 方法的正当理由。

this.forceUpdate()

如果你的 render() 方法依赖于 stateprops 之外的数据,并且你想根据该数据的更改触发重新渲染,你可以使用 forceUpdate() 方法。

示例代码:

class App extends Component {
  render() {
    return (    
    <div>
        <h1>{Math.random()}</h1>
        <button onClick={() => this.forceUpdate()}>Force Update</button>
    </div>)
  }
}

在这种情况下,更改 stateprops 不会触发更新。执行此操作的是 forceUpdate() 方法。

最佳实践

React 开发人员应该只使用 forceUpdate() 作为最后的手段。渲染函数应该只读取 propsstate。通过遵循这些指南,你可以确保 React 组件的简单性和效率。

不建议频繁使用 forceUpdate() 方法。如果你经常使用它,你可能需要查看你的代码,看看它是否可以改进。

强制 React 组件使用函数组件重新渲染

函数组件不包括 forceUpdate() 方法。但是,仍然可以使用 useState()useReducer 钩子强制它们重新渲染。

useState

类似于类组件的 setState() 方法,只要更新后的 state 对象具有不同的值,useState() 钩子总是会触发更新。

你可以创建一个自定义钩子,使用 useState() 钩子来强制更新。这是这种可重用钩子的示例代码:

const useForceUpdate = () => {
  const [ignored, newState] = useState();
  return useCallback(() => newState({}), []);
}

众所周知,useState() 钩子返回两个值:state 的当前值及其设置器。在这种情况下,我们只需要 newState setter。

useReducer

由于 useState 钩子内部使用了 useReducer,你可以直接使用这个钩子来创建一个更优雅的解决方案。React 官方文档 推荐的解决方案也使用 useReducer()。这是一个示例解决方案:

const [any, forceUpdate] = useReducer(num => num + 1, 0);
function handleChange(){
    forceUpdate();
}

useReducer() 钩子返回当前的 statedispatch 函数。在上面的例子中,我们使用 [variableName, dispatchName] 语法来存储这些值。

在此示例中,调用 handleChange() 处理程序将强制你的组件每次更新。

钩子不打算以这种方式使用。尝试将这些解决方案用于测试或异常情况。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn