提升状态管理

如果你曾在 React 社区中待过，听到“提升状态”这个术语的可能性很大。这已成为 React 开发者的流行语！

这背后有一个很好的理由。提高手上的状态是一个非常重要的概念，是每个 React 开发者工具箱中至关重要的工具。因此，这是整个课程中最重要的课程之一！

我们将通过查看提升状态的概念如何在一个示例应用中帮助我们来进行探索：

你头晕吗？

我记得我第一次遇到提升状态的想法时。那让我有点头疼。父组件传递一个函数，以便子组件可以更新父组件的状态，这个想法真是太疯狂了，第一次看到的时候！

花些时间玩一下下面提供的游乐场。希望一些动手实验能帮助你理解这个想法。我鼓励你添加很多 console.log 调用，这样你就可以确切看到哪些组件被渲染，以及何时被渲染！

这是视频中的原始代码：

import React from 'react';

import SearchForm from './SearchForm';
import SearchResults from './SearchResults';

function App() {
  return (
    <>
      <header>
        <a className="logo" href="/">
          Wanda’s Fruits
        </a>
        <SearchForm />
      </header>
      <main>
        <SearchResults />
      </main>
    </>
  );
}

export default App;

Open Sandbox

这是最终代码，状态已提升：

import React from 'react';

import SearchForm from './SearchForm';
import SearchResults from './SearchResults';

function App() {
  const [searchTerm, setSearchTerm] = React.useState('');

  return (
    <>
      <header>
        <a className="logo" href="/">
          Wanda’s Fruits
        </a>
        <SearchForm
          searchTerm={searchTerm}
          setSearchTerm={setSearchTerm}
        />
      </header>
      <main>
        <SearchResults searchTerm={searchTerm} />
      </main>
    </>
  );
}

export default App;

Open Sandbox

提升状态管理

视频摘要