这是我参与「第四届青训营 」笔记创作活动的的第7天

为什么要用Hooks

React的核心思想就是：一切组件皆是函数，即UI = f(data)。因此自然而然函数组件是被鼎力推荐的。

但是在16.8版本之前，函数组件有个十分致命的缺点：不能有自己的状态。为了实现这一性质，类组件的写法被广泛运用。

然而让一个前端程序员去精通JS的类的写法，熟练避开JS Class的诸多语法坑（比如臭名昭著的this），是一件十分耗时耗力的事情。因此，在16.8版本之后，React推出了Hooks的写法，它既体现了React函数式编程的理念，又解决了函数组件没有状态的难题，因此现在被极力推崇。

注意点：

1. 有了hooks之后，为了兼容老版本，class类组件并没有被移除，俩者都可以使用。
2. 有了hooks之后，不能在把函数成为无状态组件了，因为hooks为函数组件提供了状态。
3. hooks只能在函数组件中使用。

useState

作用

给函数组件添加状态，以及状态的修改方式。

用法

1. 导入 useState 函数
2. 调用 useState 函数，并传入状态的初始值
3. 从useState函数的返回值中，拿到状态和修改状态的方法
4. 在JSX中展示状态
5. 调用修改状态的方法更新状态

代码实现

import { useState } from "react"

function App () {
  const [count, setCount] = useState(0)
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </div>
  )
}

export default App

讲解

const [count, setCount] = useState(0)是JS的解构赋值，count是状态名，setCount是用于修改状态的函数，这两个名字可以自定义，只要保证语义化即可，但是两者的顺序不能调换。useState(0)中传的参数是count的初始值。

count和setCount是一对是绑在一起的，setCount只能用来修改count的值，count的值也只能被setCount修改。count的值依然不能直接赋新值，也就是说count = 1是不行的。

注意usestate初始值只在首次渲染生效，后续只要调用setCount，整个app中代码都会执行，此时的count每次拿到的都是最新值。

useState还可以提供其他类型的状态，如下所示。

import { useState } from "react"

function App () {
  // count:数据状态
  // setCount: 修改count的函数(专有函数)
  const [count, setCount] = useState(0)
  const [flag, setFlag] = useState(true)
  const [list, setList] = useState([])
  console.log(count)
  function test () {
    setCount(count + 1)
    setFlag(!flag)
    setList([1, 2, 3])
  }
  return (
    <div>
      count: {count}<br></br>
      flag: {flag ? 1 : 0}<br></br>
      list: {list.join("-")}
      <button onClick={test}>+</button>
    </div>
  )
}

export default App