🎉 你现在可以，使用React 钩子

使用 React 钩子，您现在可以调用useState()您的函数组件。

useState() 将返回一个包含 2 个东西的数组：

1. 一个值，表示当前状态。
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 + 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>
    );
}

您可以在此处找到演示。

上面的组件使用了一个自定义的钩子函数 ( useForceUpdate)，它使用了react状态钩子useState。它增加组件的状态值，从而告诉 React 重新渲染组件。

编辑

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

为什么 ？（你会问我）

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

这是因为在useState's setter ( setValuehere ) 中，React将前一个状态与新状态进行比较，并且仅在状态不同时才渲染。

更新 react v16.8（2019 年 2 月 16 日发布）

自从react 16.8 发布了钩子，函数组件现在可以保持持久化state。有了这种能力，你现在可以模仿一个forceUpdate：

function App() {
  const [, updateState] = React.useState();
  const forceUpdate = React.useCallback(() => updateState({}), []);
  console.log("render");
  return (
    <div>
      <button onClick={forceUpdate}>Force Render</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
<div id="root"/>

请注意，应该重新考虑这种方法，并且在大多数情况下，当您需要强制更新时，您可能做错了什么。

react前 16.8.0

不，你不能，无状态函数组件只是正常的functions返回jsx，你没有任何访问 React 生命周期方法的权限，因为你没有从React.Component.

将函数组件视为render类组件的方法部分。

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

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

  function handleClick() {
    forceUpdate();
  }

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

import useForceUpdate from 'use-force-update';

const MyButton = () => {

  const forceUpdate = useForceUpdate();

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

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

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

在此留下重要说明：

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

考虑以下情况：

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