useState介绍

useState是react自带的一个hook函数,它的作用是用来声明状态变量。

先来看一下声明的方式,上节课的代码如下: const [ count , setCount ] = useState(0); 这种方法是ES6语法中的数组解构,这样看起来代码变的简单,容易理解。

useState这个函数接收的参数是状态的初始值(Initial state),它返回一个数组,这个数组的第0位是当前的状态值,第1位是可以改变状态值的方法函数。 所以上面的代码的意思就是声明了一个状态变量为count,并把它的初始值设为0,同时提供了一个可以改变count的状态值的方法函数setCount

这时候你已经会声明一个状态了,接下来我们看看如何读取状态中的值。 You clicked {count} times 因为这时候的count就是JS里的一个变量,想在JSX中使用,值用加上{}就可以。

最后看看如果改变State中的值,看下面的代码: <button onClick={()=>{setCount(count+1)}}>点我试试

直接调用setCount函数,这个函数接收的参数是修改过的新状态值。接下来的事情就交给React,他会重新渲染组件。React自动帮助我们记忆了组件的上一次状态值.

useState不能在if...else...这样的条件语句中进行调用,必须要按照相同的顺序进行渲染。

敲黑板: React Hooks不能出现在条件判断语句中,因为它必须有完全一样的渲染顺序。