React 有两种方式可以实现组件的定义，一种是通过函数实现，一种是通过class类实现。一般的通过class类实现的组件我们可以看到足够多的生命周期、状态state可供操作，而函数式组件则没有生命周期和状态值state。对就性能而言，由于函数组件需要初始化组件，而函数组件是直接通过return 返回JSX，因此函数组件的性能要优于类组件。为了性能考虑，一般的我们推荐使用函数组件来实现组件的定义。
出于操作考虑，React自从16.8.0版本开始支持Hook功能，让我们可以通过hook方式在函数组件中实现state、生命周期的监听。这里，我们介绍hook的一种用法useState，通过useState来实现状态值的操作。操作之前，需要注意几点:
只能在React函数中调用
即是必须在组件函数中调用，不可在一般的js中使用useState等hook实现。在函数返回部分顶部调用
不可在jsx代码部分使用hook实现，须得如同js的变量定义方式使用useState等hook实现。
Class状态管理
在没有hook之前，我们通常使用class组件的方式来实现状态的管理:
import React, { Component } from 'react';
export default class extends Component {
constructor(props) {
super(props);
this.state = {date: new Date(),counter:0};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
<button onClick={() => this.state((state, props) => ({
counter: state.counter + 1}))}>
Click me
</button>
</div>
);
}
}
当使用useState时
当使用hook在函数组件中实现状态管理，对我们而言操作是变得更简单了。
import React, { useState } from 'react';
function Counter({initialCount}) {
const [count, setCount] = useState(initialCount);
return (
<>
Count: {count}
<button onClick={() => setCount(initialCount)}>Reset</button>
<button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
<button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
</>
);
}
如何使用useState
通过上面的示例,我们基本可以简单的总结useState的使用方法。
- 定义state
我们可以通过useState来定义一个state对象：
//useState格式
const [state, setState] = useState(initialState);
useState通过传入一个初始的对象值initialState,从而返回一个状态值state(初始状态值为initialState),和一个更新状态的更新函数setState。
- 使用更新函数
使用上述返回的更新函数来更新状态值:
setState(state+1);
