React中的状态管理
各位开发者好！
在这篇文章中，我们将学习 React JS 中的状态管理。
什么是国家？
每个 React 组件都会返回 JSX，用于描述 UI 的外观。`state`state是 React 中的保留字。因此，状态是一个对象，它代表应用程序中可以更改的部分。
React v16.8Hooks 的引入，使得你可以在函数式组件中使用状态和其他 React 特性。
建立我们的项目
首先，我们使用create-react-app创建一个 React 应用。create-react-app 是官方推荐的 React 应用构建工具。你需要将它安装Node >= 8.10 and npm >=5.6到你的电脑上。要创建并运行项目，请输入以下命令：
npx create-react-app my-app
cd my-app
npm start
在本教程中，我们将构建一个简单的计数器应用程序，您可以在其中增加或减少计数。
现在让我们开始编写代码吧！
我们来创建计数器应用程序的基本结构
。src/App.js
import React, { Component } from "react";
import "./App.css";
class App extends Component {
onIncrementHandler = () => {
};
onDecrementHandler = () => {
};
render() {
return (
<div className="App">
<h3 className="counter">0</h3>
<div className="container">
<button onClick={this.onIncrementHandler}>Increment</button>
<button onClick={this.onDecrementHandler}>Decrement</button>
</div>
</div>
);
}
}
export default App;
我们现在位于 App.css 文件中，让我们为计数器应用程序添加一些样式，使其看起来更美观：
src/App.css
.App {
height: 100vh;
overflow: hidden;
text-align: center;
display: flex;
flex-direction: column;
}
.counter{
font-size: 150px;
font-weight: 400;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
button {
width: 15%;
margin: 0 30px;
font-size: 30px;
color: white;
background-color: black;
border: none;
transition: transform .2s;
cursor: pointer;
}
button:hover {
border: 1px solid black;
color: black;
background-color: white;
transform: scale(1.2);
}
您应该已经注意到，我们将计数器的值硬编码为 0。那么，如何修改计数器的值呢🤔？
为了控制计数器的值，我们引入了状态（state）。状态是一个 JavaScript 对象，用于存储组件的属性值。当组件的状态发生变化时，组件的 UI 也会随之改变。
向类中添加本地状态
state = {
counter: 0
}
要动态获取计数器，请替换<h3 className="counter">0</h3>为
<h3 className="counter">{this.state.counter}</h3>
正确使用状态
setState()这是在初始状态设置之后更新状态的合法方法。
// Right
this.setState({comment: 'Hello World!'});
这里，我们传递了一个对象setState()。该对象包含我们要更新的状态部分，在本例中是 comment 的值。React 会获取这个值并将其合并到需要它的对象中。
不要直接修改状态。我们应该始终以不可变的方式更新状态。
// Wrong
this.state.comment = 'Hello World';
如果需要使用先前的状态进行更新，则上述方法将无法正常工作。因此，上述方法的替代方案是：
this.setState((prevState) => {
counter: prevState.counter + 1
});
现在让我们更新我们的onIncrementHandler状态onDecrementHandler。
onIncrementHandler = () => {
this.setState((prevState) => ({
counter: prevState.counter + 1,
}));
};
onDecrementHandler = () => {
this.setState((prevState) => ({
counter: prevState.counter - 1,
}));
};
最终更新后的状态管理代码如下所示：
import React, { Component } from "react";
import "./App.css";
class App extends Component {
state = {
counter: 0,
};
onIncrementHandler = () => {
this.setState((state) => ({
counter: state.counter + 1,
}));
};
onDecrementHandler = () => {
this.setState((prevState) => ({
counter: prevState.counter - 1,
}));
};
render() {
return (
<div className="App">
<h3 className="counter">{this.state.counter}</h3>
<div className="container">
<button onClick={this.onIncrementHandler}>Increment</button>
<button onClick={this.onDecrementHandler}>Decrement</button>
</div>
</div>
);
}
}
export default App;