1. 什么是状态
创建一个react项目，src下只需有一个index.js文件
// src/index.js
import ReactDOM from "react-dom";
const App = () => {
let data = 1;
const setDataAdd = () => {
data = data + 1;
console.log(data);
};
return (
<div className="App">
<h1>测试数据：{data}</h1>
<button onClick={setDataAdd}>让数据+1</button>
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
这个 React 组件里面有一个数据 data ，我们让组件中的 H1 标签引用了它。并且希望这个数据在每一次按钮单击的时候，这个 H1 标签里面的数字可以自动的变化。但是我们无论怎么点击，这个标签里面的数据也都没有任何的变化。打开这个沙盒的 Console 却发现每一次点击时，这些数据的确是在发生变化的。
现在，我们将这个组件稍微进行一下改写，用一个 React Hooks 将它变为 State（状态） 看看。
// src/index.js
import ReactDOM from "react-dom";
import { useState } from "react";
const App = () => {
const [data, setData] = useState(1);
const setDataAdd = () => {
setData((oldData) => oldData + 1);
console.log(data);
};
return (
<div className="App">
<h1>测试数据：{data}</h1>
<button onClick={setDataAdd}>让数据+1</button>
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
现在H1 标签已经可以按照数据的变化自动变化了！这个将数据反应在用户界面上的过程，就叫 渲染 ，当数据发生变动时，网页的显示也会跟着一起变化，这就叫 重渲染
为什么相同的 data 变量，使用不同的写法，产生的效果会截然不同呢？
你可以这么理解：React这种视图层前端框架只关注那些已经被声明成需要特别监视的变量，只有这些变量发生变动时，才会触发组件的重渲染。这些通过特殊方法声明的变量，就叫做 State（状态） 。比如说上面例子中的 data 就是使用了 React 中的一个 Hook 函数 useState() 声明了这个变量需要进行监视，那么 data 就是一个 State 。在检测到 data State 变化时，React 就会重新渲染这个组件。而在 Vue 中，这些 State 则是放到了 data() 函数里。
2. 何时需要状态管理
使用前端框架构建的网站由许多的组件组成，这些组件可能会在自己内部保留有许多的 State。但是这些内部的 State 其它组件是无法访问的。当一个组件需要访问其它组件的少量 State 时，你可以使用 Vue 中的 Provide/Inject 和 React 中的 Context。随着组件数量的增多，各个组件内部维护的 State 也将变多。这个时候如果继续使用上述方法来访问 State，代码将变得难以维护。最好的解决办法就是将这些 State 全部抽离到一个 统一的状态存储（Store） 中统一管理，组件本身不持有任何的状态，获取数据的唯一方式就是从 Store 中获取。如果组件想要修改状态，必须通过 Store 内置的方法（mutation/reducer）执行。这样，网站里的大部分组件就符合了单一数据流原则。
3. 总结
状态管理的本质——像数据库一样集中管理从 API 中获取到的数据，让组件更加方便地进行维护。但是别急着为你的网站添加状态管理，如果你的网站组件内部的状态没有严重到需要相互依赖的“蜘蛛网”形状，那么还是先维持现状吧。正如 Redux 的开发者所说：
Don’t use Redux just because someone said you should - take some time to understand the potential benefits and tradeoffs of using it.
不要仅仅只是因为别人告诉你应该用 Redux 就强上 Redux —— 花点时间了解一下利弊再做定夺。
