useState是版本中可用的内置反应钩子之一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>;
}
}
// Please note that new object is created when setUserInfo callback is used
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' })
参见示例：
// Please note that new object is created when setUserInfo callback is used
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>
与类组件中的 setState 方法不同，useState 不会自动合并更新对象。您可以通过将函数更新程序形式与对象传播语法相结合来复制此行为：
setState(prevState => {
// Object.assign would also work
return {...prevState, ...updatedValues};
});
更多关于useState查看官方文档。