我可以在无状态组件中调用forceUpdate吗？

Question

我有一个无状态组件,我想重新渲染它.我怎么能这样做？我试过用this,但没用.

我可以改用forUpdate或其他东西吗？

Answer 1

你现在可以使用React钩子

使用反应挂钩,您现在可以调用useState()组件功能.这将返回一个由2个数组组成的数组:一个值,以及一个"setter"函数,可以用来更新返回的第一个值,这样做会强制你的函数组件重新渲染,就像这样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() {
    // use your hook her
    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函数.

Answer 2

如果您确实需要这样做，官方常见问题解答（https://reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate）现在推荐这种方式：

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

  function handleClick() {
    forceUpdate();
  }

Answer 3

不,你不能,State-Less组件只是正常state返回forceUpdate,你没有任何访问React生命周期方法,因为你没有从扩展functions.

Answer 4

最简单的方法

如果您想强制重新渲染，请添加一个可以更改的虚拟状态以启动重新渲染。

const [rerender, setRerender] = useState(false);

...
setRerender(!rerender);     //whenever you want to re-render

这将确保重新渲染，并且您可以setRerender(!rerender)随时随地调用:)

Answer 5

我使用了一个名为use-force-update 的第三方库 来强制渲染我的 React 功能组件。像魅力一样工作。只需在您的项目中使用 import 包并像这样使用。

import useForceUpdate from 'use-force-update';

const MyButton = () => {

  const forceUpdate = useForceUpdate();

  const handleClick = () => {
    alert('I will re-render now.');
    forceUpdate();
  };

  return <button onClick={handleClick} />;
};

Answer 6

免责声明：不是问题的答案。

在此留下重要说明：

如果您尝试强制更新无状态组件，则您的设计可能有问题。

考虑以下情况：

1. 将 setter (setState) 传递给可以更改状态并导致父组件重新渲染的子组件。
2. 考虑提升状态
3. 考虑将该状态放在您的 Redux 存储中，它可以自动强制重新渲染连接的组件。

Answer 7

最佳方法 - 在每次渲染时不会重新创建多余的变量：

const forceUpdateReducer = (i) => i + 1

export const useForceUpdate = () => {
  const [, forceUpdate] = useReducer(forceUpdateReducer, 0)
  return forceUpdate
}

用法：

const forceUpdate = useForceUpdate()

forceUpdate()