在reactjs和react-native我们经常发现组件状态的错误使用。随着应用程序规模扩大并变得更加复杂（例如，通过使用嵌套组件），这个问题变得尤为重要，并且最终可能会导致性能下降（损害用户体验）、恶劣的开发体验。维护我们的代码，甚至是一个充满意外行为的有缺陷的应用程序。
发生这种情况时，通常会出现一些小问题需要比应有的时间更长的时间来修复，或者特定的解决方案会在我们的应用程序的另一个角落触发错误。
今天我们将使用一个简单但真实的错误场景来展示react组件状态的错误实现会给我们带来什么以及如何让它按预期工作。在本例中，我们使用react hooks进行状态管理。
具体情况
我们的一个组件由基本表单和将数据发送到 api 的附加逻辑组成，我们检测到输入的数据与我们的服务最终接收到的数据之间存在不一致。
事实证明，这是在附加到组件状态更改的逻辑中分配的问题。更具体地说，状态变量用于保存表单值，其内容在更新后立即在请求内发送（或尝试更新其值，正如我们将看到的）。
这就是 react 组件的生命周期没有被遵循：当我们更新状态变量时，react 需要一些时间来重新渲染整个组件及其子组件（除非我们告诉它不要这样做）每次更改都这样做）。这就是为什么在此过程完成之前我们无法使用状态变量。
? 更进一步，请记住，当我们指示组件中的状态更改时，react 将此更新（以及我们可能请求的任何其他更新）排入队列，并应用它在虚拟 dom 中，最后（通过称为协调的过程）将其传输到 dom，以便我们可以在应用程序中看到更新。绝对比仅仅为变量分配新值要复杂得多。 有关组件状态和重新渲染的更多信息，请随时查阅文档！
现在让我展示一下我们的代码：
import { usestate } from "react";
import testapi from "services"
const mycomponent = (): reactelement => {
const [statefuldata, setstatefuldata] = usestate<string>("");
const handleclick = async (newdata: string) => {
// the problem here is that react needs some time to re-render our
// component everytime statefuldata is updated (in this case through a
// hook). for this reason, statefuldata is not updated by the time
// we call testapi.postdata (its value will be `''`), so this
// handler needs a fix.
setstatefuldata(newdata);
await testapi.postdata(statefuldata);
}
return (
<button onclick={() => handleclick("new data")}>
click me!
</button>
)
}
可能的出路
我相信有两条路可以解决这样的场景。正确的值取决于状态值更新后您需要如何处理它。
1. 移除状态变量
如果我们不是在每次表单收到任何更改时都在组件中重新渲染，那么就不需要状态变量，我们可以使用表单的内部数据直接使用我们的 api。
import testapi from "services"
const myimprovedcomponent = (): reactelement => {
const handleclick = async (newdata: string) => {
// if there is no need for a re-render (and therefore for a state
// variable), a possible solution is to avoid the use of the hook
// and simply use the value that we receive from params.
await testapi.postdata(newdata);
}
return (
<button onclick={() => handleclick("new data")}>
click me!
</button>
)
}
2. 为状态变化附加逻辑
如果我们确实想在每次更新变量时重新渲染组件（假设我们想在屏幕上显示其内容），那么我们需要一个状态变量，更重要的是，我们需要添加一个#?? #useeffect当我们的变量更新以处理此事件时触发的钩子。
import { useState } from "react";
import TestApi from "services"
const MyImprovedStatefulComponent = (): ReactElement => {
const [statefulData, setStatefulData] = useState<String>("");
// If we need a state variable we have to attach our logic to its updates
// through the useEffect hook This way we will be consuming TestApi only
// when statefulData has been updated.
useEffect(() => {
// An extra validation here since this callback is not only
// triggered when statefulData but also when mounting the component.
// For more information check the docs!
if (!!statefulData) {
await TestApi.postData(statefulData);
}
}, [statefulData])
const handleClick = async (newData: String) => {
setStatefulData(newData);
}
return (
<button onClick={() => handleClick("New data")}>
Click me!
<div>{statefulData}</div>
</button>
)
}
结束语
这里解决的问题是组件状态管理不良的结果。由于
react 生命周期阶段没有得到尊重，我们的组件在存储在其状态中的数据与附加到用户交互的排队状态更新的预期结果之间出现了滞后。
总之，良好实践的使用以及组件对官方react文档的调整至关重要。正确的状态管理，srp后组件的原子化（单一职责原则，dry后逻辑集中（don't repeat yourself）与外部组件解耦，实现高度内聚的内部逻辑是最大限度地减少问题解决时间、降低错误率并允许应用程序稳定性和可扩展性的实践。
图片取自官方
reactdocs.
