useState是React中的一个内置Hook，从0.16.7版本开始提供。
useState只应该在函数组件中使用。如果我们需要一个内部状态，并且不需要实现更复杂的逻辑，比如生命周期方法，那么useState就是解决方案。
const [state, setState] = useState(initialState);
返回一个状态值及其更新函数。在初始渲染期间，返回的状态 (state) 与作为第一个参数 (initialState) 传递的值相同。使用 setState 函数来更新状态。它接受一个新状态值并排队重新渲染组件。请注意，useState 钩子用于更新状态的回调函数的行为与组件的 this.setState 不同。为了展示区别，我准备了两个示例。
class UserInfoClass extends React.Component {
state = { firstName: 'John', lastName: 'Doe' };
render() {
return <div>
<p>userInfo: {JSON.stringify(this.state)}</p>
<button onClick={() => this.setState({
firstName: 'Jason'
})}>Update name to Jason</button>
</div>;
}
}
function UserInfoFunction() {
const [userInfo, setUserInfo] = React.useState({
firstName: 'John', lastName: 'Doe',
});
return (
<div>
<p>userInfo: {JSON.stringify(userInfo)}</p>
<button onClick={() => setUserInfo({ firstName: 'Jason' })}>Update name to Jason</button>
</div>
);
}
ReactDOM.render(
<div>
<UserInfoClass />
<UserInfoFunction />
</div>
, document.querySelector('#app'));
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>
当使用 setUserInfo 回调函数时，会创建一个新的对象。请注意，我们丢失了 lastName 键的值。为了修复这个问题，我们可以将函数传递到 useState 中。
setUserInfo(prevState => ({ ...prevState, firstName: 'Jason' })
查看示例:
function UserInfoFunction() {
const [userInfo, setUserInfo] = React.useState({
firstName: 'John', lastName: 'Doe',
});
return (
<div>
<p>userInfo: {JSON.stringify(userInfo)}</p>
<button onClick={() => setUserInfo(prevState => ({
...prevState, firstName: 'Jason' }))}>
Update name to Jason
</button>
</div>
);
}
ReactDOM.render(
<UserInfoFunction />
, document.querySelector('#app'));
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>
Unlike the setState method found in class components, useState does
not automatically merge update objects. You can replicate this
behavior by combining the function updater form with object spread
syntax:
setState(prevState => {
return {...prevState, ...updatedValues};
});
要了解更多关于useState的内容，请参阅官方文档。
useState的实现方式。这是16.9版本的定义。 - chemturion