useState是0.16.7版本中内置的react钩子之一。
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 => {
/ /对象。Assign也可以
返回{…prevState…updatedValues};
})；
有关我们的更多信息，请参阅官方文档。
