useState 钩子如何能够重新渲染其父函数？

Question

任何人都可以帮助我了解功能性 cmp 在状态发生变化时如何重新渲染。

参考下面例如

function App() {
  const [count, updateCount] = useState(0);

  return (
    <div className="App">
      <h1>{count}</h1>
      <button onClick={() => updateCount(count + 1)}>Update</button>
    </div>
  );
}

如果我将它与基于类的反应组件进行比较，那么我们在类中有渲染函数，我相信只要状态或道具发生变化，就必须触发它（必须有生命周期函数链和其中之一将是 this.render())

但是上面的代码结构App是一个函数组件，在App内部我们正在改变状态/计数，如何反应知道在updateCount/setter函数之后，App/（或其父函数）应该被再次调用？我的意思是我们没有将 App 函数的引用传递给 useState。

Answer 1

您的渲染函数中的代码会根据您的状态做出反应。人们喜欢说 UI 是组件状态的可视化表示。

在Hooks 发布之前，没有办法在函数组件中拥有 React 的内部状态。您可能一直在使用 Redux、MobX 或其他第三方库来管理您的状态，但无法连接到组件的本地状态。

您的渲染函数的行为与它在有状态类组件中的行为完全相同。