Question

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

例如在下面引用

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

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

如果我将其与基于类的react组件进行比较，则在那里我们在类内部拥有了render函数，我相信每当状态或props发生变化时，它都必须被触发（必须存在生命周期函数链，其中之一就是this.render（））

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

Answer 1

您的渲染函数中的代码会反应为您的状态。人们喜欢说UI是组件状态的直观表示。

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

您的呈现函数的行为与有状态类组件中的行为完全相同。

useState钩子如何能够重新呈现其父函数？

1 个答案: