Hooks

作用

为函数组件勾入状态和生命周期。

允许我们在函数组件中使用预定义的内部函数来标记状态和组件生命周期, 使得几乎所有组件都可以用函数来编写。

解决的问题

1. 状态逻辑复用。
2. 规避了类组件自身的一些问题。
   • 谜一般的 this 指向。
   • 类组件不利于代码优化，某些情况下不方便配合 TS 做开发。

渐进策略

了解 Hooks 和之前 class 的写法是可以共存的。

Hooks 和现有代码可以同时工作，建议渐进式地使用它们。

useState 的使用

基本使用 useState(init)

1. 参数：表示默认值
2. 返回值：数组
   • 第一项表示状态
   • 第二项表示修改状态的方法 -> 这个方法可以接收一个函数，函数的参数表示上一次的状态

第一个参数可以是函数

1. 函数的返回值：初始值
2. 执行次数：只会在初始化的时候执行一次
3. 应用场景：牵扯到大量计算的状态或者涉及到业务逻辑处理的情况

注意点

1. 目前只能直接出现在函数组件中
2. 不能嵌套在 if/for/其他函数中

useEffect 的使用

基本使用

1. 执行时机
   • useEffect 第二个参数不传
     • 初始化 -> 相当于生命周期中的 componentDidMount 函数
     • 任意状态变化的时候 -> 相当于生命周期中的 componentDidUpdate
   • useEffect 第二个参数写个空数组
     • 初始化 -> 相当于生命周期中的 componentDidMount 函数
     • 应用场景
       • 发请求
       • 绑定事件
       • 初始化的时候需要开启定时器
   • useEffect 第二个参数写了有状态的数组
     • 初始化 -> 相当于生命周期中的 componentDidMount 函数
     • 数组里面的状态变化的时候会执行
2. 倒计时

import React, { useState, useEffect } from 'react'

export default function App() {
    const [count, setCount] = useState(10)
    useEffect(() => {
        setInterval(() => {
            // 参数 count 代表上一次状态
            // 这里没有闭包产生
            // 有闭包的话这里的 count 都表示初始值
            setCount((count) => count - 1)
        }, 1000)
    }, [])
    return (
        <div>
            <h3>{count}</h3>
        </div>
    )
}