一、矛与盾的问题？（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的初使用
- 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>
);
}
useState中使用多个复杂变量
-
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>
);
}
useEffect的初使用
- 函数清除
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
