React - 如何强制功能组件呈现？

Question

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

我该怎么做？

由于没有实例 this ，我不能调用 this.forceUpdate() 。

原文由 Gorakh Nath 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

自从 React 16.8 发布时带有 hooks ，功能组件具有持久化能力 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"/>

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

---

反应 16.8.0 之前

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

将功能组件视为 render 类组件的方法部分。

原文由 Sagiv b.g 发布，翻译遵循 CC BY-SA 4.0 许可协议