现有如下一个React应用：
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
constructor(...args) {
super(...args);
this.state = { text: "", checked: false };
}
render() {
const { text, checked } = this.state;
return (
<div>
<input
type="text"
value={text}
onChange={e => this.setState({ text: e.target.value })}
/>
<input
type="checkbox"
checked={checked}
onChange={e => this.setState({ checked: e.target.checked })}
/>
<ul>
<li>{text}</li>
<li>{checked.toString()}</li>
</ul>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
我们看到App组件是类组件，因为这里用到了state。state对象有两个值，一个是输入框的text值，一个是复选框的勾选值。这个应用做的事情，就是监控输入框text值的变化和复选框勾选值的变化（用了ul来显示state的变化）。
由于React引入了React Hooks，什么是Hooks？说简单点就是可以完全不用类来写组件了，那用什么写？函数。函数怎么使用state？使用userState函数。下面我们看看怎么用函数实现上述功能。
//导入useState
import React, { useState } from "react";
import ReactDOM from "react-dom";
//函数组件
function App() {
//useState的参数为初始状态值，返回了一个长度为2的数组，第一个元素就是我们类组件里的state对象，第二个元素是个函数，作用相当于类组件里用的setState。这两个元素的名字随便是什么都可以
const [state, setState] = useState({ text: "", checked: false });
//此函数的参数为整个state的部分内容，在调用setState的时候，用这个部分内容更新对应的老的内容
const updateState = partialState =>
setState(oldState => ({
...oldState,
...partialState
}));
return (
<div>
<input
type="text"
value={state.text}
onChange={e =>
updateState({
text: e.target.value
})
}
/>
<input
type="checkbox"
checked={state.checked}
onChange={() => updateState({ checked: !state.checked })}
/>
<ul>
<li>{state.text}</li>
<li>{state.checked.toString()}</li>
</ul>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
至于state怎么设计，是分开一个一个处理还是像在本例中集中在一个对象管理，悉听尊便。
