最近在新项目中用到了react hooks，趁热乎总结一下。
1. React Hooks是什么&为什么要用React Hooks?
以下引入官方文档中的简单介绍：Hook是React16.8的新特性，它可以让你在不编写class的情况下使用state以及其他React特性。
新特定的出现总归是要解决以往开发过程中存在的一些问题，它和之前的版本对比主要有以下优势：
1. 可以再非class的情况下使用更多React特性。（可以不用再使用class来写react代码啦）
2. 函数更加专一化。（一个函数只负责一块逻辑的处理，而并非将很多不相关的逻辑都堆在一个函数）
3. 复用组件的状态逻辑。这也是它主要要解决的问题，但只是状态逻辑的复用，会共享数据的处理逻辑，而非数据本身。
2. React Hooks的分类
根据官方文档的介绍，React Hooks主要有以下几种hook：
-
基础hook
- useState：返回一个state和一个更新state的函数，功能类似于class中的state和this.setState。
- useEffect: 接收一个包含命令式、且可能有副作用代码的函数。它主要可以实现componentDidmount、componentWillUnmount、componentDidUpdate的功能。同时也可以在我们自己封装的hook中使用useEffect。
-
useContext: 接收一个context对象，并返回该context的当前值。调用了 useContext 的组件总会在 context 值变化时重新渲染。
useContext(MyContext)只是相当于<MyContext.Consumer>，只是能接收到context的值并订阅其变化。我们仍然需要在上层组件中用<MyContext.Provider> 来传递变化。
-
额外的hook
- useReducer： 它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。可提供类似redux的功能。
- useCallback：它接收一个回调函数和一个依赖数组作为参数，返回一个缓存的回调函数。
- useMemo：它接收一个回调函数和一个依赖数组作为参数，返回一个缓存的值。
- useRef：返回一个可变的 ref 对象，并且在组件的整个生命周期内保持不变，即可跨周期来获取数据。
- useImperativeHandle：可以在使用 ref 时自定义暴露给父组件的实例值。
- useLayoutEffect：如果在useEffect中会操作dom，那就用useLsyoutEffect来代替。它里边的回调函数会在dom更新完成之后执行，但在浏览器绘制前运行完成。
- useDebugValue： 可在React 开发者工具中显示自定义 hook 的标签。
3. 详解React Hooks
(1) useState
const [count, setCount] = useState(0);其中0作为count的初始值，后续调用count来取值，调用setCount()来修改值。
- 可根据状态之间的关联性来选择将其设置为一个状态还是多个状态。例如
const [name, setName] = useState('susan');
const [school, setSchool] = useState('school-one');
//由于name和school都属于个人信息，所以可以将其放在一个state中。
const [user_info, setUserInfo] = useState({name: 'susan', school: 'school-one'});
- useState的调用必须放在顶层调用，不能在循环、条件语句、嵌套函数中。
//正确调用
export const Basic = () => {
const [count, setCount] = useState(0);
}
//错误调用
export const Basic = () => {
const flag = 1;
if(flag){
const [count, setCount] = useState(0);
}
}
必须放在顶层调用的原因是react对hook的存储是是按顺序的，react会在第一次渲染时将state按useState的顺序逐个放到全局的数组中，后边每次更改state都会根据顺序去取state。如果不在非顶层调用的话，就会导致根据初始的序号取不到对应的state。
(2) useEffect：
写法如下：useEffect(()=>{}, [])
- 第二个参数传与不传影响很大（第二个参数为依赖项，可选）
import React, { useState, useEffect } from 'react';
export const BasicInfo = () => {
const [count, setCount] = useState(0);
//不写第二个参数，
useEffect(()=>{
document.title = `You clicked ${count} times`;
})
//第二个参数为空
useEffect(()=>{
document.title = `You clicked ${count} times`;
}, [])
//第二个参数有值
useEffect(()=>{
document.title = `You clicked ${count} times`;
}, count)
}
以上三种写法所导致的结果分别是：
- 不写第二个参数时：useEffect中第一个函数参数在每次渲染后都会执行一次。
- 第二个参数为空时：函数只有在第一次渲染后会执行，相当于componentDidMount。
- 第二个参数不为空时，函数只有在该参数发生变化时，才会执行。（可取，避免了不必要的执行）
注意：useEffect会在每次渲染后都会执行，只是第一个回调函数会依据情况来执行
- 依赖项是否发生了变化？
import React, { useState, useEffect } from 'react';
export const BasicInfo = () => {
const [count, setCount] = useState(0);
const [item_list, setItemList] = useState([]);
//第二个参数为基本数据类型（趁机回想一下基本数据类型都有什么来着？）
useEffect(()=>{
console.log('count...', count);
}, [count])
//第二个参数为为引用数据类型
useEffect(()=>{
console.log('item_liist...', item_list)
}, [item_list])
//第二个参数每次都是一个新的数组
useEffect(()=>{
console.log('item_liist...', item_list)
}, [...item_list])
}
- 当第二个参数为基本数据类型时，那么上述写法没有任何问题；
- 当第二个参数为引用数据类型时，由于react比较依赖是否发生变化的方法是简单的比较，所以当还是同一个数组时，它并不会继续判断数组中的内容是否发生变化，就会直接认定该依赖没有变化。
解决办法就是将依赖项每次都换成一个新的数组，如第三种写法。
(3) useContext:
- 只是替代了consumer，provider该怎么写还是得怎么写
// 创建 Context
const Context = React.createContext();//context包含consumer和provider
function Father() {
return (
//使用provider给子组件提供数据
<Context.Provider data={'我是父组件的数据'}>
<Son />
</Context.Provider>
);
}
// 使用 Consumer 从上下文中获取数据
function Son() {
return (
<Context.Consumer>
{data => <div>{data}</div>}
</Context.Consumer>
);
}
//使用useContext从上下文中获取数据
function Son() {
const data = useContext(Context);
return <div>{data}</div>;
}
好啦，暂时就以基础hook作为本次分享的结尾啦，因为发现太长的文章可能看到一半就不太想看了，或者没有那么长连续的时间来仔细看。以上可能在有些地方理解的有出入，欢迎大家来讨论哦。下一篇将继续分享额外的hook的一些用法和注意的点。
希望大家能持续关注哦，留一些个人信息方便大家找到我哦。知乎 github
附上个人公众号哦，希望大家前来骚扰（也会经常写一些随笔来记录生活，毕竟人生漫漫）
[图片上传失败...(image-98a2a6-1585186388805)]
网友评论