笔记-React-Hooks

一、矛与盾的问题？（Class组件与函数式组件）

  在 React 中 Class 组件好用还是函数式组件好用呢，各有各的说法，如果你一味的去说这个好还是另一个好，那么终归还是太年轻啊。
  对此，我的建议是：把两个都好好看看，各有千秋，如果你是领导你想用那个就用哪个，如果你是螺丝，领导让你用哪个你就用哪个就行了。

Class组件优缺点

• 👍Class组件可以定义自己的state，用于保存内部状态
• 👍Class组件有自己的生命周期，用于相关逻辑
• 👍Class组件在改变状态时，只会重新执行render、componentDidUpdate更新函数

---

• 👎随着业务增多，Class组件越累越臃肿复杂
• 👎难以理解的Class、this绑定等
• 👎组件的状态复用比较困难

函数式组件优缺点

• 👍语法上更加简洁，易于理解
• 👍不再需要考虑this的问题
• 👍性能消耗小，不需要创建实例

---

• 👎不能保存状态，每次调用函数都会产生新的临时变量
• 👎没有生命周期，重新渲染时，整个函数都会被执行（函数中发送网络请求，意味着每次重新渲染都会发送一次新的网络请求）

对于上面 函数式组件 这些情况， 我们通常都会编写 Class组件，直到 Hooks 的出现

• 👍Hooks的出现基本可以代替我们之前所有使用Class组件的地方
• 👍它可以让你在不编写 Class 的情况下使用 state 以及其他的 React 特性🌟🌟🌟🌟🌟
• ⚠️Hook只能在函数组件中使用，不能在类组件，或者函数组件之外的地方使用

---

二、Hooks使用规则

Hook使用规则

• 1、只在最顶层使用 Hook。（不要在循环，条件或嵌套函数中调用 Hook）
• 2、只在 React 函数中调用 Hook。（不要在普通的 JavaScript 函数中调用 Hook）
• 具体原因以后文档会具体分析一下，或者直接去官网链接查看（面试常考）⌛️⌛️⌛️⌛️

---

三、基础Hooks的使用

3.1、State Hook

• 认识useState

- 调用：useState会帮助我们定义一个state变量，它与class里面的this.state提供的功能完全相同
- 传参：useState接收唯一的参数就是初始 state，在第一次组件被调用时使用来作为初始化值（如果没有则为undefine）
- 返回值：useState返回值是一个数组，可以通过数组的解构来拿到值

使用场景：
如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其转化为 class。现在你可以在现有的函数组件中使用 Hook

• useState的初使用

import React, {useState} from 'react';

export default function CounterHook() {
    /**
     * Hook：useState
     *
     * 本身是一个函数，来自react包
     * 
     * 1、参数：作用是给创建出来的状态一个默认值
     * 2、返回值：元素1（当前count的值）、元素2（设置新的值时，使用的一个函数）
     */
    
    const [count, setCount] = useState(0);
    return (
        <div>
            <h2>当前计数：{count}</h2>
            <button onClick={e => setCount(count + 1)}>+1</button>
            <button onClick={e => setCount(count - 1)}>-1</button>
        </div>
    );
}

• useState中使用多个复杂变量

import React, {useState} from 'react';

export default function MultipleState() {
    const [friends, setFriends] = useState(['li', 'zhi']);
    const [students, setStudents] = useState([
        {id: 110, name: 'li', age: 18},
        {id: 111, name: 'zhi', age: 19},
        {id: 112, name: 'qiang', age: 20},
    ]);

    function incrementAgeWithIndex(index) {
        const newStudents = [...students];
        newStudents[index].age += 1;
        setStudents(newStudents);
    }

    return (
        <div>
            <h2>好友列表：</h2>
            <ul>
                {
                    friends.map((item, index) => {
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
            <button onClick={e => setFriends([...friends, 'qiang'])}>添加朋友</button>

            <h2>学生列表</h2>
            <ul>
                {
                    students.map((item, index) => {
                        return (
                            <li key={item.id}>
                                <span>名字：{item.name}, 年龄：{item.age}</span>
                                <button onClick={e => incrementAgeWithIndex(index)}>age+1</button>
                            </li>
                        );
                    })
                }
            </ul>
        </div>
    );
}

• 3.2、Effect Hook

• 认识 useEffect

- useEffect 可以完成一些类似于Class生命周期的功能
- 把 useEffect 看做Class组件中 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合

使用场景
- 一般用于网络请求、DOM手动更新、事件监听等

• useEffect的初使用

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

export default function ChangeTitleHook() {
    const [counter, setCounter] = useState(0);

    useEffect(() => {
        document.title = counter;
    })

    return (
        <div>
            <h2>当前计数：{counter}</h2>
            <button onClick={e => setCounter(counter + 1)}>+1</button>
        </div>
    );
}

• 函数清除

Class 组件中，通常会在 componentDidMount 中设置订阅，并在 componentWillUnmount 中清除它，下面介绍一下在 useEffect 中如何清除

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

function DispatchEffectHook() {
    const [counter, setCounter] = useState(0);

    useEffect(() => {
        console.log('订阅');

        // 如果外部将此组件清除，会调用内部函数，取消订阅
        return () => {
            console.log('取消订阅');
        }
    }, []);

    return (
        <div>
            <h2>DispatchEffectHook</h2>
            <h2>{counter}</h2>
            <button onClick={e => setCounter(counter + 1)}>+1</button>
        </div>
    );
}

export default DispatchEffectHook;

• 性能优化：通过跳过 Effect 进行性能优化

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

function MultiEffectHook() {
    const [counter, setCounter] = useState(0);

    /**
     * 参数二：[counter]
     * 
     * 表示仅在 counter 更改时更新
     */
    useEffect(() => {
        console.log('修改dom', counter);
    }, [counter]);

    /**
     * 如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。
     * 
     * 这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。
     */
    useEffect(() => {
        console.log('网络请求');
    }, []);

    return (
        <div>
            <h2>DispatchEffectHook</h2>
            <h2>{counter}</h2>
            <button onClick={e => setCounter(counter + 1)}>+1</button>
        </div>
    );
}

export default MultiEffectHook;

四、自定义HOOK

• 本质将函数之间一些共同的代码提取到单独的函数中，而不是React新特性
• 自定义 Hook 是一个函数，其名称必须以 “use” 开头，函数内部可以调用其他的 Hook

import React, {useEffect} from 'react';

const Home = (props) => {
    useLoggingLife('Home');
    return <h2>Home</h2>
}

const Profile = (props) => {
    useLoggingLife('Profile');
    return <h2>Profile</h2>
}

function CustomerLifeHookDemo01() {
    useLoggingLife('CustomerLifeHookDemo01');
    return (
        <div>
            <Home/>
            <Profile/>
        </div>
    );
}

/**
 * 自定义hook必须以use开头
 * @param name
 */
function useLoggingLife(name) {
    useEffect(() => {
        console.log(`${name}组件被创建`);
        return () => {
            console.log(`${name}组件被销毁`);
        }
    }, []);
}

export default CustomerLifeHookDemo01;

---

五、useReducer

- 放到后期的Redux中讲解

---

六、深入拓展（待更新）

---

参考文章

• React官网-Hook
• 《小码哥-React视频》
• 30分钟精通React Hooks