React ……我们都知道这个框架在开发人员或程序员中很受欢迎。 React 位于所有流行 JavaScript 库的顶端。理解 React 的概念及其不同的部分非常重要。
状态是React的核心，是需要学习的最重要的概念。它的行为方式、变化方式以及在组件的不同部分中的工作方式。作为一个 React 开发者，你应该知道如何正确使用它。在构建应用程序时，您必须避免一些常见的陷阱。
在本文中，我们将讨论国家的五个最重要的部分。这些部分相互构建，使您能够理解 React 中的复杂主题。为了使概念清晰我们将讨论许多实际示例，您可以自行检查。
1. 状态更新与 useState 不能合并。
当 React 开发人员使用 React 钩子从基于类的组件移动到基于函数的组件时，状态更新不再自动合并。
您可以根据需要多次调用 useState 钩子以使用尽可能多的变量。在下面给出的示例中……我们有一个包含电子邮件和密码输入的基本表单。我们将把每一个的状态作为单独的状态变量进行管理。
Javascript
import React from "react";
export default function App() {
const [email, setEmail] = React.useState("");
const [password, setPassword] = React.useState("");
return (
);
}Javascript
import React from "react";
export default function App() {
const [state, setState] = React.useState({
email: '',
password: ''
})
function handleInputChange(e) {
setState({
[e.target.name]: e.target.value
})
}
return (
);
}Javascript
import React from "react";
export default function App() {
const [state, setState] = React.useState({
email: '',
password: ''
})
function handleInputChange(e) {
setState({
// spread in previous state with object spread operator
...state,
[e.target.name]: e.target.value
})
}
return (
);
}Javascript
import React from 'react';
export default function App() {
const [count, setCount] = React.useState(0);
// Don't assign state to new (non-state)
// variables. Below code is not acceptable.
const newCount = count;
// Don't directly mutate state
const countPlusOne = count + 1;
return (
<>
Count: {count}
);
}现在让我们对上面的示例进行一些更改。我们可以在单个对象中管理表单状态。这将允许您只调用一次 useState。电子邮件和密码不会由单个状态变量管理。
现在的问题是……当它是一个对象时，我们如何使用 setState函数更新状态？
在表单输入中，我们可以添加 onChange 属性。这个 onChange 道具将由通用事件处理程序处理。看看下面给出的代码快照……
Javascript
import React from "react";
export default function App() {
const [state, setState] = React.useState({
email: '',
password: ''
})
function handleInputChange(e) {
setState({
[e.target.name]: e.target.value
})
}
return (
);
}
在上面的示例中，状态正在根据当前输入的用户名称进行更新。这种模式基本上用在基于类的组件中，但它不适用于 useState 钩子。当您使用 useState 的 setState函数更新 State 时，它不会自动合并。
究竟是什么意思……？
这只是意味着无论何时我们在用户键入时设置状态时都不会包含先前的状态。现在，包含状态的解决方案或选项是什么？
我们可以通过使用扩展运算符手动执行此操作。
Javascript
import React from "react";
export default function App() {
const [state, setState] = React.useState({
email: '',
password: ''
})
function handleInputChange(e) {
setState({
// spread in previous state with object spread operator
...state,
[e.target.name]: e.target.value
})
}
return (
);
}
2. 状态更新应该是不可变的
React 状态应该以正确的方式进行管理和更新。要使用 useState 钩子管理状态，您应该只使用专用的 setter函数，该函数作为数组中的第二个元素提供，您可以从 useState 返回以更新它。如果您不这样做，并且您将尝试使用纯 JavaScript 示例手动更新它，那么您将无法从应用程序中找到预期的行为。
请记住，状态正确更新会导致我们的组件重新渲染。现在有一个问题……如果我们以自己的方式而不是“React”方式更新状态，状态会发生什么。在这种情况下，当某些事情发生变化时，React 将负责显示和渲染组件。
重点是……如果你用普通的 JavaScript 而不是 setState 更新状态，那么它不会触发重新渲染，React 也不会向用户显示状态的变化。
在 React 中，重要的是要知道如何使用 React 更新状态，哪一个是合适的状态挂钩来实现您的目的。您可以选择 useReducer、useState 或 Redux 等第三方状态管理库。你不能直接更新或改变你的状态。
状态更新应该始终是不可变的。直接改变您的状态将使您的状态不可预测，并且可能会导致您的应用程序出现意外问题。
Javascript
import React from 'react';
export default function App() {
const [count, setCount] = React.useState(0);
// Don't assign state to new (non-state)
// variables. Below code is not acceptable.
const newCount = count;
// Don't directly mutate state
const countPlusOne = count + 1;
return (
<>
Count: {count}
);
}
3.状态更新是异步的、有计划的，不能立即执行
另一个需要考虑的重要概念是状态更新不会立即执行。如果您查看 React 文档，您会发现调用 setState函数时到底发生了什么。您可以使用它来更新与其关联的状态变量。你可以看看 React 文档，看看当你调用 setState函数时到底发生了什么。
您可以使用它来更新与其关联的状态变量。我们被告知它接受一个新的状态值并将组件的重新渲染排入队列。这是什么意思？？
这意味着组件不会立即重新渲染。这通常是出于性能目的而发生的，它可以更好地了解 React 在幕后所做的事情。
setState函数不会立即更新状态，它只是在将来的某个时间安排状态更新。查看代码并准确了解状态更新发生或将发生的时间并不容易。
这对于比较我们之前提到的 useRef 与考虑到它的当前属性能够保持数据是有好处的。使用 useRef 进行的更新是同步执行的。查看代码，准确了解何时在 useRef 中执行更新，而不是在 useState 中执行更新。
结论
正如我们所讨论的，状态是 React 的核心。在使用 React 时，编写代码时需要小心。状态行为很重要，了解您如何处理 React 应用程序中的状态很重要。理解本文中的第二点非常重要。一旦你开始在 React 上工作，随着你的进步，你会发现自己在项目中做得更好。理解状态行为的最好办法是打破代码并看看事情是如何工作的。