hooks|hooks 系列二（useState） hooks系列二：useState

快来加入我们吧！ "小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习，及时获取最新文章。
"Code tailor" ，如果您对我们文章感兴趣、或是想提一些建议，微信关注 “小和山的菜鸟们” 公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！
我们为什么要学 hooks 前言这篇文章，我们主要目的是了解一下状态钩子（useState）的使用.
useState 定义
useState() 用于为函数组件引入状态。纯函数不能有状态，所以使用钩子来引入状态。
如何使用
useState 的使用如下面的语句。

const [count, setCount] = useState(defaultValue) // 假设 defaultValue 为 0

let countVariable = useState(0) let count = countVariable[0] let setCount = countVariable[1]

setCount(count + 1) // count 1 setCount(10) // count 10

const [name, setName] = useState('xhs') const [age, setAge] = useState(18) const [dowhat, setDowhat] = useState({ thing: 'Learn Hooks' })

setName('xxxxxxxhs') setAge(20) setDowhat({ thing: 'Learn Nothing' })

import React, { Component } from 'react' import './App.css' ? export class App extends Component { constructor(props) { super(props) this.state = { count: 0, } } handleWithAddOne() { this.setState({ count: this.state.count + 1 }) } handleWithAddTwo() { this.setState({ count: this.state.count + 2 }) } handleWithDecreaseOne() { this.setState({ count: this.state.count - 1 }) } render() { const { count } = this.state return (Now,the number is {count}. {/* 点击之后 count + 1 */} {/* 点击之后 count + 2 */} {/* 点击之后 count - 1 */} ) } }

.app { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .three-btn { display: flex; flex-direction: column; } ? .button { height: 40px; margin: 12px 0px; color: white; border: none; border-radius: 10px; } .add { background-color: #1890ff; } ? .decrease { background-color: red; }

使用多个 useState 就可以定义多个 state 变量。
useState 返回的是一个数组，一般直接使用解构赋值取出两个值，state 以及 修改 state 的函数 。这两个值是需要成对获取的。
useState 函数，只需要传入一个唯一参数，作为默认值，初始化 state。
现在，让我们来总结一下 useState。
小结
简单来讲，useState 就是为函数组件提供了 React state 的功能，现在就可以称为函数组件了，这之前，叫做无状态组件。
就这样，我们就成功使用了 useState ，运行的结果与上面类组件的运行结果是相同的，代码的复杂程序被大幅度的降低了，相比于类组件，可能这样的方式更容易让人接受。

import './App.css' // 导入css样式，样式同上 import { useState } from 'react'function App() { const [count, setCount] = useState(0) return (Now,the number is {count}. ) }

我们来完成需求：
我们将 state 的值，使用 useState 进行创建，用 setCount 进行修改 count 的值。
使用 useState 重写案例
下面，我们一起来看看 useState 是怎么实现的。
从上面我们可以看到，虽然效果已经达到是我们期望，但是可以很明显的感受到它的代码是很"重"的，在我们真实的项目开发中，React App 都是由多个类，按照层级，一层层组成的，复杂程度可想而知。这时候，如果我们在加入 Redux ，那会变得更加复杂繁琐。
这是运行之后的效果图
css 的样式
首先，我们来看一下，在类组件中，我们使用 state 的情况，我们需要在 state 中声明变量 count，并赋予默认值 0，而修改的方式只有通过 this.setState() 对 count 进行修改。
类组件使用 this.state 实现
【hooks|hooks 系列二（useState）】我想要有一个简单的计数器，需要有 +1、+2 和 -1 三个操作，可以刷新页面中现在的 numer 值。
现在你以及对 useState 有了一定的了解，那我们就来完成一个需求：
对比类组件如何修改这些变量呢？跟上面一样，直接调用各自的 set 方法就可以了。
上述的语句只能声明一个 state 变量，如果你想要声明多个 state 变量，只需要使用多个 useState 就可以了。
使用多个 state 变量
首先执行第一次 setCount 之后，值从 0 -> 1 ，第二次执行的时候，直接传入了一个 10，而它的值就直接从 1 -> 10 所以 count 的值更新为 10。
修改 state 的值，只需要直接使用 setCount 方法就可以进行更改。传入的值会直接返回给 count 值并更新。如下面两个。
修改 state
也就是说，使用 useState 返回的是一个数组，它等价于下面的代码：
返回的是一个数组，但是都会被使用 JavaScript 语法的数组解构成两个值，当前 state 和 修改 state 的函数 。这与 class 里面 this.state.count 和 this.setState 类似，唯一区别就是你需要成对的获取它们。
useState 返回值
它定义了一个名为 count 的 state 变量，它与 class 里面的 this.state 提供的功能完全相同。一般来说，在函数退出后变量就会”消失”，而 state 中的变量会被 React 保留。
useState 做了什么
useState 需要传入的唯一参数就是初始化 state ，我们可以传各种类型的值，比如：数字、字符、数组、对象等。
useState 需要的参数
下节预告在下节中，我们将为大家介绍 useEffect ，敬请期待！