因此，我开始写另一篇博文，先说明我在编码方面有多糟糕。然而，我的技能水平或缺乏技能水平正在提高，但是当他们基本上在 4-5 周前开始这一旅程时，人们能知道多少。不用说，这篇文章将反思
useState()在反应。看看我在那里做了什么？是的，我很老套，但足够了解我是故意这样做的。哈。
这是一个我一开始无法理解的话题。即使现在在熨斗学校通过了我的代码挑战之后，我真的知道我在做什么或在说什么吗？希望答案是肯定的，并且您了解我的想法。现在对我来说确实更有意义，在组件中设置状态非常重要。起初我认为没关系，你可以在任何时候移动状态变量或 setter 函数。然而，知道在哪里放置状态是至关重要的，并且可以让您在编写代码时更轻松，尤其是当子组件不能直接将 props 传递给父组件时，除非通过回调函数。稍后会详细介绍组件。
在继续之前对 useState() 的简要说明。它只能在功能组件中使用。它还包含一个变量和一个更新变量的函数，我们可以根据我们正在处理的内容设置初始值。如果是表单，它将是一个空字符串，如果我们正在使用类似切换按钮的东西，我们可以使用布尔数据类型。同样，这完全取决于您要做什么，因此请始终谨慎行事，并确保您尝试做的事情是有意义的。
const [state, setState] = useState(initialState);
我回顾了我们的一个实验室的一个例子，从应用程序组件中，有两个分开的分支，一个标题组件和一个用于渲染图像的容器组件（现在渲染什么并不重要）。请记住，在层次结构中，app 位于顶部，是父组件，而 header 和容器从 app 向下分支，它们是 app 的子组件。从这里开始，标题也分支到一个搜索栏组件，现在距离主要父级应用程序有 2 个级别。
在实验室示例中，我们必须将一些图像渲染到容器组件上，我们使用 fetch 请求来完成
useEffect() { fetch(\\url here) .then() .then() // }内置在 React 中的钩子。一旦你完成了这项工作，其中一项可交付成果就是能够过滤搜索结果。理想情况下，您在容器中渲染图像，但是，您也可以在应用程序中渲染它们，然后从那里将数据作为道具移动到容器中。您将需要使用 useState() 来获取图像数据并将其传递。已经看到了这个钩子的复杂性。
现在记住搜索栏组件，嗯，它基本上位于层次结构的另一侧，在标题下，如果你还记得的话，孩子也不能将道具传递回父母或相邻的孩子组件。因为当用户输入搜索内容时会发生变化，我们需要为搜索创建一个状态。现在我们在哪里为搜索创建这个状态，可以让生活更简单一点，或者让我们做更多的工作。我会用我做的方式来解释它。我在应用程序中设置搜索的状态，因为从应用程序中，您可以将初始状态变量或函数发送给任何孩子。在这种特殊情况下，我们将变量作为道具发送到容器组件，因为在这个组件中，我们的所有数据都被渲染并且我们可以过滤结果。但是，该函数将更新对变量的更改，因此我们首先通过标题将其发送到搜索栏组件，因为我们必须尊重层次结构，作为道具。在搜索栏组件中，我们有一个表单。此表单将根据用户键入的内容进行相应更改，因此该函数将更改变量的初始状态，该变量已移动到层次结构树的另一端，并且只会显示搜索到的内容。
新手的解释相当冗长而复杂。主要的收获是 useState() 钩子的重要性以及它如何允许您更改组件的初始状态及其目标，或者该组件在整个应用程序中的用途。在我的示例中，搜索栏和容器是不同分支下的两个独立组件。它们不能直接通信，而是通过 useState() 间接通信。
原文： https://dev.to/jaythoven/usestate-is-just-a-powerful-hook-5fcb