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

Question

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

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

Answer 1

现在，使用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将之前的状态与新的状态进行比较，
并且仅在状态不同时才进行渲染。