在使用钩子进行写作时避免以下五个常见错误

到目前为止，Reaction在Web开发领域已经存在了相当长的一段时间了。近年来，它作为敏捷Web开发工具的地位稳步加强。特别是在宣布和发布了新的钩子API/概念之后，编写组件变得前所未有的容易。

尽管Reaction背后的团队和庞大的社区试图以令人印象深刻的方式培训和解释框架的概念，但我仍然看到在使用它时犯下的一些陷阱和常见错误。我保留了一个列表，列出了过去几年中我看到的所有与Reaction相关的错误，特别是与使用挂钩有关的错误。在这篇文章中，我想向您展示最常见的。我也会试着详细地解释，为什么我认为它们是错误的，并提出了一个更干净的方式做这件事的建议。

在我们开始这个清单之前，我必须说，下面的大多数事情不是根本性的错误，或者乍一看不会看起来是错误的。其中大多数不太可能影响应用程序的性能或外观，可能除了从事产品开发的开发人员之外，没有人会注意到这里有问题，但我仍然相信，高质量的代码可以带来更好的开发人员体验，从而产生更好的产品。

与任何软件框架或库一样，关于它也有数百万种不同的意见。你在这里看到的一切都是基于我个人的观点，不应该被认为是一般性的。如果你对她有不同的看法，我很乐意听听。如果你对她有不同的看法，我很乐意听听。

Reaction的核心概念之一是处理状态。您可以通过状态控制整个数据流和渲染。每次再次渲染树时，它很可能与状态更改相关联。

使用useState挂钩，您现在还可以在函数组件中定义您的状态。这是在Reaction中处理状态的一种非常简洁和简单的方法。但它也可能被滥用，就像我们在下面的示例中看到的那样。

对于下一个示例，我们需要一点解释，假设我们有两个按钮，一个按钮是计数器，另一个按钮用当前计数发送请求或触发操作。但是，当前数字永远不会显示在组件中。仅当您单击第二个按钮时才需要该请求。

函数ClickButton(属性){const[count，setCount]=useState(0)；const onClickCount=()=>；{setCount((C)=>；c+1)；}；const onClickRequest=()=>；{apiCall(Count)；}；Return(计数器提交)；}

乍一看，你可能会问这到底有什么问题？这难道不是为这个州而设的吗？你当然是对的，这个可以很好地工作，而且可能永远不会有问题。但是，在Reaction中，每个状态更改都将强制组件及其子组件重新提供程序。但在上面的示例中，由于我们从未在呈现部分中使用该状态，因此每次我们设置计数器时，最终都会出现不必要的呈现，这可能会影响性能，也可能会产生意想不到的副作用。

如果您想在组件内使用一个变量，该变量应该在呈现之间保持其值不变，但也不想强制重新呈现，您可以使用useRef钩子。它将保留该值，但不会强制组件重新渲染。

函数ClickButton(Props){const count=useRef(0)；const onClickCount=()=>；{count.current++；}；const onClickRequest=()=>；{apiCall(count.current)；}；Return(Counter Submit)；}