useState0.16.7バージョンで利用可能な組み込みの反応フックの1つです。
useState機能コンポーネント内でのみ使用する必要があります。useState内部状態が必要で、ライフサイクルメソッドなどのより複雑なロジックを実装する必要がない場合の方法です。
const [state, setState] = useState(initialState);
ステートフルな値とそれを更新する関数を返します。
最初のレンダリング中に返される状態（state）は、最初の引数として渡された値（initialState）と同じです。
setState関数は、状態を更新するために使用されます。新しい状態値を受け入れ、コンポーネントの再レンダリングをキューに入れます。
useState状態を更新するためのフックコールバックは、コンポーネントとは異なる動作をすることに注意してくださいthis.setState。違いを示すために、2つの例を用意しました。
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は更新オブジェクトを自動的にマージしません。関数updaterフォームをオブジェクトスプレッド構文と組み合わせることで、この動作を再現できます。
setState(prevState => {
// Object.assign would also work
return {...prevState, ...updatedValues};
});
詳細についてuseStateは、公式ドキュメントを参照してください。
useState実装方法を理解することもできます。バージョン16.9の定義は次のとおりです。