P02:useState() 的介绍和多状态声明
useState 的介绍
useState
是 react 自带的一个 hook 函数,它的作用是用来声明状态变量。
本文从三个方面来看useState
的用法,分别是声明、读取、使用(修改)。这三个方面掌握了,你基本也就会使用useState
了.
先来看一下声明的方式,上篇文章的代码如下:
const [ count , setCount ] = useState(0);
这种方法是 ES6 语法中的数组解构,这样看起来代码变的简单易懂。现在 ES6 的语法已经在工作中频繁使用,所以如果你对 ES6 的语法还不熟悉,我觉的有必要拿出 2 天时间学习一下。 如果不写成数组解构,上边的语法要写成下面的三行:
let _useState = userState(0) let count = _useState[0] let setCount = _useState[1]
useState
这个函数接收的参数是状态的初始值(Initial state),它返回一个数组,这个数组的第 0 位是当前的状态值,第 1 位是可以改变状态值的方法函数。 所以上面的代码的意思就是声明了一个状态变量为 count,并把它的初始值设为 0,同时提供了一个可以改变count
的状态值的方法函数。
这时候你已经会声明一个状态了,接下来我们看看如何读取状态中的值。
<p>You clicked {count} times</p>
你可以发现,我们读取是很简单的。只要使用{count}
就可以,因为这时候的 count 就是 JS 里的一个变量,想在JSX
中使用,值用加上{}
就可以。
最后看看如果改变State
中的值,看下面的代码:
<button onClick={()=>{setCount(count+1)}}>click me</button>
直接调用 setCount 函数,这个函数接收的参数是修改过的新状态值。接下来的事情就交给React
,它会重新渲染组件。React
自动帮助我们记忆了组件的上一次状态值,但是这种记忆也给我们带来了一点小麻烦,但是这种麻烦你可以看成规则,只要遵守规则,就可以愉快的进行编码。
多状态声明的注意事项
比如现在我们要声明多个状态,有年龄(age)、性别(sex)和工作(work)。代码可以这么写。
import React, { useState } from 'react'; function Example2(){ const [ age , setAge ] = useState(18) const [ sex , setSex ] = useState('男') const [ work , setWork ] = useState('前端程序员') return ( <div> <p>JSPang 今年:{age}岁</p> <p>性别:{sex}</p> <p>工作是:{work}</p> </div> ) } export default Example2;
其实细心的小伙伴一定可以发现,在使用useState
的时候只赋了初始值,并没有绑定任何的key
,那 React 是怎么保证这三个 useState 找到它自己对应的 state 呢?
答案是:React 是根据 useState 出现的顺序来确定的
比如我们把代码改成下面的样子:
import React, { useState } from 'react'; let showSex = true function Example2(){ const [ age , setAge ] = useState(18) if(showSex){ const [ sex , setSex ] = useState('男') showSex=false } const [ work , setWork ] = useState('前端程序员') return ( <div> <p>JSPang 今年:{age}岁</p> <p>性别:{sex}</p> <p>工作是:{work}</p> </div> ) } export default Example2;
这时候控制台就会直接给我们报错,错误如下:
React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render
意思就是 useState 不能在if...else...
这样的条件语句中进行调用,必须要按照相同的顺序进行渲染。如果你还是不理解,你可以记住这样一句话就可以了:就是 React Hooks 不能出现在条件判断语句中,因为它必须有完全一样的渲染顺序。
本文我们对useState
函数 API 进行了详细讲解,希望小伙伴都能有所收获。别走开,下节更精彩。
码云笔记 » P02:useState() 的介绍和多状态声明