如何强制一个可用的React组件进行渲染？

40 浏览
0 Comments

如何强制一个可用的React组件进行渲染？

我有一个函数组件，我想强制它重新渲染。

我该如何实现？

由于没有实例this，我无法调用this.forceUpdate()。

admin 更改状态以发布 2023年5月25日
0

2 答案

0 Comments

官方FAQ现在推荐如果你真的需要这样做，就采用这种方式:

  const [ignored, forceUpdate] = useReducer(x => x + 1, 0);
  function handleClick() {
    forceUpdate();
  }

0
0 Comments

现在，您可以使用React Hooks

使用React Hooks，您现在可以在功能组件中调用useState()。

useState()会返回一个包含两个内容的数组：

  1. 表示当前状态的值。
  2. 它的设定者。使用它来更新值。

通过设定器更新值将强制重新渲染您的功能组件，
就像forceUpdate一样：

import React, { useState } from 'react';
//create your forceUpdate hook
function useForceUpdate(){
    const [value, setValue] = useState(0); // integer state
    return () => setValue(value => value + 1); // update state to force render
    // A function that increment  the previous state like here 
    // is better than directly setting `setValue(value + 1)`
}
function MyComponent() {
    // call your hook here
    const forceUpdate = useForceUpdate();
    return (
            {/*Clicking on the button will force to re-render like force update does */}
            
    );
}

您可以在此处找到演示。

上面的组件使用自定义钩子函数（useForceUpdate），该函数使用React状态钩子useState。它增加了组件状态的值，从而告诉React重新呈现组件。

编辑

在本答案的旧版本中，代码段使用了布尔值，并在forceUpdate()中进行了切换。现在，我已经编辑了我的答案，代码段使用数字而不是布尔值。

为什么？（您会问我）

因为有一次发生在我身上，我的forceUpdate()从两个不同的事件连续调用了两次，因此它将布尔值重置为其原始状态，而组件从未呈现。

这是因为在useState的设定器（这里的setValue）中，React比较了上一个状态和新状态，只有状态不同才进行呈现。

0