Reaction-如何强制呈现功能组件？ [英] React - How to force a function component to render?

问题描述

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

如何才能做到这一点？
由于没有实例this，我无法调用this.forceUpdate()。

推荐答案

🎉现在可以使用React hooks

使用Reaction挂钩，您现在可以在函数组件中调用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 + 1); // 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>
    );
}

You can find a demo here。

上面的组件使用自定义钩子函数(useForceUpdate)，该函数使用Reaction状态钩子useState。它递增组件的状态值，从而告诉Reaction重新呈现组件。

编辑

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

为什么？(您会问我)

因为有一次我碰巧MyforceUpdate()随后从两个不同的事件被调用了两次，因此它将布尔值重置为其原始状态，而组件从未呈现。

这是因为在useState的setter(此处为setValue)中，React将以前的状态与新的状态进行比较，并仅在状态不同时呈现。

这篇关于Reaction-如何强制呈现功能组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！