React-如何强制功能组件渲染？

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个功能组件，我想强迫它重新渲染。

我该怎么办？

由于没有实例this，因此我无法致电this.forceUpdate()。

回答：

now您现在可以使用React挂钩

现在，使用react挂钩，您可以调用useState()函数组件。

useState()将返回由2个元素组成的数组：

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); // update the state to force render
}
function MyComponent() {
    // call your hook here
    const forceUpdate = useForceUpdate();
    return (
        <div>
            {/*Clicking on the button will force to re-render like force update does */}
            <button onClick={forceUpdate}>
                Click to re-render
            </button>
        </div>
    );
}

您可以在此处找到演示。

上面的组件使用了自定义的钩子函数（useForceUpdate），该函数使用了布尔状态钩子（useState）。它切换布尔状态，从而告诉React重新运行render函数。

编辑

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

（你会问我）

因为发生在我身上的forceUpdate()是，后来又从2个不同的事件中两次调用了my ，因此将布尔值重置为其原始状态，并且组件从未呈现。

因为在useState的setter（setValue此处）中，React将之前的状态与新的状态进行比较，

以上是 React-如何强制功能组件渲染？ 的全部内容， 来源链接： utcz.com/qa/434178.html

回到顶部