React-Hooks

一、类组件和函数式组件的对比

Hook 的特性：在编写class 的情况下，使用state 以及其他React 特性（比如生命周期）

类组件相比于函数式组件的优势：

1. 类组件可以定义自己的state，用来保存组件自己内部的状态。函数式组件不可以，因为函数每次调用都会产生新的临时变量
2. 类组件有自己的生命周期，可以在对应的生命周期中完成自己的逻辑。比如在componentDidMount 中发送网络请求，并且该声明周期函数只会执行一次。函数式组件在函数中发送网络请求，意味着每次重新渲染都会重新发送一次网络请求。
3. 类组件可以在状态改变时只会重新执行render 函数，以及重新调用的声明周期函数componentDidUpdate 等，函数式组件在重新渲染时，整个函数都会被执行

二、Hooks 的使用

1、useState

• 在函数退出后函数中定义的变量会“消失”， 而state 中的变量会被React 保留
• useState 接收唯一一个参数，在第一次组件被调用时使用并作为初始值（如果没有传递参数，那么初始值为undefined）
• useState 的返回值是一个数组，可以通过解构获取state 和setState

import { memo, useState } from "react"
function CounterHook(props) {
    const [ counter, setCounter ] = useState(0)
    function decrement() {
        setCounter(counter - 1)
    }
    return (
        <div>   
            <h2>当前计数: {counter}</h2>
            <button onClick={e=>setCount(count+1)}>+1</button>
            <button onClick={decrement}>-1</button>
        </div>
    )
}
export default memo(CounterHook)

2、useEffect

• useEffect 传入的回调函数会在组件被渲染完成后，会自动执行
• useEffect 传入的回调函数可以有一个返回值，这个返回值是另外一个回调函数。这是effect 可选的清除机制，每个effect 都可以返回一个清除函数，这样就可以将添加和移除订阅的逻辑放在一起
• react 会在组件更新和卸载的时候执行清除操作
• effect 在每次渲染的时候都会执行

// 在组件第一次渲染、组件更新时都会执行
useEffect(() => {
    // 当前传入的回调函数会在组件被渲染完成后，会自动执行
    // 网络请求/DOM操作/事件监听
})

useEffect(() => {
    console.log("")
    // 回调函数：回调函数 => 组件被重新渲染或者组件卸载的时候执行
    return () => {
        console.log("")
    }
})