Hooks
- 为什么会出现 hook
-
class 组件可以定义 state，以及使用生命周期，维护组件内部状态；function 组件没有 state，不能使用 react特性（生命周期等），每次调用都会开辟新的空间和变量，函数执行完毕变量就会被回收。
-
class 组件有生命周期，可以在生命周期完成一定的逻辑；
-
class组件在状态改变的时候会重新执行 render 方法，而 【function组件】在重新渲染的时候，会全部执行，又没有办法去调用 生命周期，且没有自己的状态
【用来解决<函数组件>没有状态，生命周期的问题】 v16.8+的特性
- 什么是 Hook
- 可以在不写 class组件 的情况下使用 state 一进其他啊react特性（生命周期方法）
- 解决了 react 存在的 HOC 的嵌套问题
- Hook 的使用场景
- Hook 的出现，基本可以替代之前所使用的 class 组件 的地方
- 在旧的项目中，不需要直接重构为 Hook
- Hook 只能在 函数组件 中使用，不能在类组件中或函数组件外的地方使用
- Hook 的使用原则
- 不要在循环里面、条件判断 或者 分支里面去使用 Hook,只能在函数的最外层调用
- 只能在 react 【函数组件】中使用 hook
- 单独在一个 useState 我们称之为 hook
- Hooks 是对一类 Hook 的总称。
- Hook 它是 JS 的函数，这个函数可以帮你钩入 react 的 state 以及生命周期方法
useState
- useState 本身是一个函数，来自于 react，有参数和返回值
- 调用useState 返回的是一个数组
- 数组第一个元素是：当前的状态 state
- 第二个元素：是一个函数，这个函数的作用就是去修改和设置我们的状态
const arr = useState(0)
console.log(arr); // [0, function]
- useState 传函数(用的较少)
- 如果新的 state 需要通过之前的 state 去进行计算的话
- 可以使用函数传递给 setState，这个函数就是接收之前的 state，并且返回一个更新的额值
const [ state, setState ] = useState( () => 100 )
