React Hook使用☾超详细☽详解

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。同时，它是100% 向后兼容的，不包含任何破坏性改动。

在我们讲解React Hook之前，先讲一下为什么要使用它，就好比谈对象，你得先搞清楚你喜欢他什么。我们知道，在没有 hook 之前，我们写一个 react 项目总是避免不了下面的代码：

class Example extends React.Component {

constructor(props) {

super(props);

this.state = {

count: 0

};

}

render() {

return (

<div>

<p>You clicked {this.state.count} times</p>

<button onClick={() => this.setState({ count: this.state.count + 1 })}>

Click me

</button>

</div>

);

}

我想，对于很多做前端的朋友而言，如果学过后端语言还好，因为他们对类有一个明确的概念，对构造器和继承的理解也很容易，但对于很多直接就开始做前端的朋友（比如：非科班出生的一些自学者），突然让他们接受一个类的概念是很难适应的，虽然 ES6 已经有了 class。但是，如果你用 hook，就可以摆脱 class 了，上面的代码就变成了下面这样：

import React, { useState } from 'react';

function Example() {

// 声明一个叫 "count" 的 state 变量

const [count, setCount] = useState(0);

return (

<div>

<p>You clicked {count} times</p>

<button onClick={() => setCount(count + 1)}>

Click me

</button>

</div>

);

}

少了extends，class，constuctor，super等关键字，是不是感觉一下子轻松了很多，同时，onClick 的代码也精简了很多。并且，对于前端来说，一个组件实现的是一个功能，用 function 来定义一个组件，比起用 class 来说，更符合语境。

当然，这只是其中的一个点，它的好处还有很多：

Hook 使你在无需修改组件结构的情况下复用状态逻辑，这使得在组件间或社区内共享 Hook 变得更便捷；

Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据）,而并非强制按照生命周期划分。你还可以使用 reducer 来管理组件的内部状态，使其更加可预测。

Hook 使你在非 class 的情况下可以使用更多的 React 特性，让你的代码远离class。

废话到此结束，接下来，就分别讲讲各个 hook 的用法和作用。不过要记住一点，使用每个 hook 都得先从 react (16.8+版本) 中引入

1	import { useState } from 'react';

1、useState

上面的代码已经展示过它的功能了，useState 通过在函数组件里调用它来给组件添加一些内部 state，React 会在重复渲染时保留这个 state。useState 会返回一对值：当前状态和一个让你更新它的函数，你可以在事件处理函数中或其他一些地方调用这个函数。它类似 class 组件的 this.setState，但是它不会把新的 state 和旧的 state 进行合并。

import React, { useState } from 'react';

function Example() {

// 声明一个叫 "count" 的 state 变量

const [count, setCount] = useState(0);

return (

<div>

<p>You clicked {count} times</p>

<button onClick={() => setCount(count + 1)}>

Click me

</button>

</div>

);

}

useState 支持我们在调用的时候直接传入一个值，来指定 state 的默认值，他支持可以作为js参数一切数据，包括函数，但如果是函数的话，函数必须要有返回值。

const [ obj,setObj ] = useState({ a: 1 }),

const [ arr,setArr ] = useState([ 1, 2 ])，

const [ count, setCount ] = useState(() => {

return props.count || 0

})

我们在使用 useState 时，如果想要获取上一轮该 state 的值的话，只需要在 useState 返回的第二个参数，传入一个参数，该函数的参数就是上一轮的 state 的值。

setCount(count){

return count + 1

}

当我们使用多个 useState 的时候，那 react 是如何识别哪个个是哪个呢？其实很简单，它是靠第一次执行的顺序来记录的，就相当于每个组件存放useState 的地方是一个数组，每使用一个新的 useState，就向数组中 push 一个 useState，所以，当我们在运行时改变 useState 的顺序，数据会混乱，增加 useState，程序会报错。

function App (props) {

let count, setCount

let sum, setSum

if (count > 2) {

[ count, setCount ] = useState(0)

[ sum, setSum ] = useState(10)

} else {

[ sum, setSum ] = useState(10)

[ count, setCount ] = useState(0)

}

return (

<div>

点击次数: { count }

总计：{ sum }

<button onClick={() => { setCount(count + 1); setSum(sum - 1)}}>点我</button>

</div>

)

}

2、useEffect

如果你熟悉 React Class 的生命周期函数，你可以把 useEffect 看做是 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合，并且它会根据你传递的第二个参数达到灵活多变的效果。

// 不使用useEffect

class App extends PureComponent {

componentDidMount() {

document.title = count

}

componentDidUpdate() {

document.title = count

}

// 使用useEffect

function App () {

useEffect(() => {

document.title = count

})

}

useEffect 支持第二个参数，分三种情况：

1、什么都不传，组件每次 render 之后 useEffect 都会调用，相当于 componentDidMount 和 componentDidUpdate；

2、传入一个空数组 [], 只会调用一次，相当于 componentDidMount 和 componentWillUnmount；

3、’传入一个数组，其中包括变量，只有这些变量变动时，useEffect里的方法才会执行。

如果 useEffect 最后 return 了一个方法，return 的方法会在 componentWillUnmount 阶段执行，比如定时器的清除，就可以通过 return 一个 clearTimer 方法来搞定。

在实际开发中，适当的把逻辑拆分成多个 effect，不仅业务清晰，再配合好第二个参数，生命周期的问题就迎刃而解了。且看下面例子：

function App () {

const [ count, setCount ] = useState(0)

const [ width, setWidth ] = useState(document.body.clientWidth)

const onChange = () => {

setWidth(document.body.clientWidth)

}

useEffect(() => {

// 相当于 componentDidMount

window.addEventListener('resize', onChange, false)

return () => {

// 相当于 componentWillUnmount

window.removeEventListener('resize', onChange, false)

}

}, [])

useEffect(() => {

// 相当于 componentDidUpdate

document.title = count

})

useEffect(() => {

console.log(`count change: count is ${count}`)

}, [ count ])

return (

<div>

页面名称: { count }

页面宽度: { width }

<button onClick={() => { setCount(count + 1)}}>点我</button>

</div>

)

}

3、useMemo

useMemo 主要用于一个变量依赖于另一个变量，有点类似于vue的计算属性，主要用于性能优化。同时它也支持传入第二个参数，用法和 useEffect 类似。不过需要注意的是，它的首次执行是在渲染的时候，而不是渲染完成之后。

function App(props) {

const { pullUp, pullDown, onScroll } = props;

// 对传入的上拉和下拉函数进行防抖处理

let pullUpDebounce = useMemo(() => {

return debounce(pullUp, 300)

}, [pullUp]);

let pullDownDebounce = useMemo(() => {

return debounce(pullDown, 300)

}, [pullDown]);

// 绑定scrollEnd方法

useEffect(() => {

bScroll.on('scrollEnd', () => {

//判断是否滑动到了底部

if(bScroll.y <= bScroll.maxScrollY + 100){

pullUpDebounce();

}

});

return () => {

bScroll.off('scrollEnd');

}

}, []);

// 绑定touchEnd方法

useEffect(() => {

bScroll.on('touchEnd', (pos) => {

//判断用户的下拉动作

if(pos.y > 50) {

pullDownDebounce();

}

});

return () => {

bScroll.off('touchEnd');

}

}, []);

}

4、useCallback

useCallback 可以说是 useMemo 的语法糖，能用 useCallback 实现的，都可以使用 useMemo，在 react 中我们经常面临一个子组件渲染优化的问题，尤其是在向子组件传递函数props时，每次 render 都会创建新函数，导致子组件不必要的渲染，浪费性能，这个时候，就是 useCallback 的用武之地了，useCallback 可以保证，无论 render 多少次，我们的函数都是同一个函数，减小不断创建的开销。

// 例1

const onClick = useMemo(() => {

return () => {

console.log('button click')

}

}, [])

const onClick = useCallback(() => {

console.log('button click')

}, [])

// 例2

const [count1, changeCount1] = useState(0);

const [count2, changeCount2] = useState(10);

const calculateCount = useCallback(() => {

if (count1 && count2) {

return count1 * count2;

}

return count1 + count2;

}, [count1, count2])

useEffect(() => {

const result = calculateCount(count, count2);

message.info(`执行副作用，最新值为${result}`);

}, [calculateCount])

useCallback 和直接使用 useEffect 不同的地方在于使用 useCallback 生成计算的回调后，在使用该回调的副作用中，第二个参数应该是生成的回调。其实这个问题是很好理解的，我们使用 useCallback 生成了一个与 count1 / count2 相关联的回调方法，那么当关联的状态发生变化时会重新生成新的回调，副作用监听到了回调的变化就会去重新执行副作用，此时 useCallback 和 useEffect 是按顺序执行的，这样就实现了副作用逻辑的抽离。同样，useCallback 的第二个参数和 useMemo一样，没有区别。

5、useRef

useRef 总共有两种用法：

1、获取子组件的实例

const Children = forwardRef((props, ref) => {

<div>

<p>{props.title}</p>

</div>

})

function App () {

const [ count, setCount ] = useState(0)

// 如果children组件不是一个forwardRef，这里会报错

const childrenRef = useRef(null)

// const

const onClick = useMemo(() => {

return () => {

console.log('button click')

console.log(childrenRef.current) // 这里可以得到Children实例

setCount((count) => count + 1)

}

}, [])

return (

<div>

点击次数: { count }

</div>

)

}

2、在函数组件中的一个全局变量，不会因为重复 render 而重复申明，类似于类组件的 this.xxx。有些情况下，我们需要保证函数组件每次 render 之后，某些变量不会被重复申明，比如说 Dom 节点，定时器的 id 等等，在类组件中，我们完全可以通过给类添加一个自定义属性来保留，比如说 this.xxx，但是函数组件没有 this，自然无法通过这种方法使用，有的朋友说，我可以使用 useState 来保留变量的值，但是 useState 会触发组件 render，在这里完全是不需要的，我们就需要使用 useRef 来实现了。

function App () {

const [ count, setCount ] = useState(0)

// 注意，这里的ref并没有指定给任何元素

const timer = useRef(null)

console.log(timer)

let timer2

useEffect(() => {

let id = setInterval(() => {

setCount(count => count + 1)

}, 500)

timer.current = id

timer2 = id

return () => {

clearInterval(timer.current)

}

}, [])

const onClickRef = useCallback(() => {

clearInterval(timer.current)

}, [])

const onClick = useCallback(() => {

clearInterval(timer2)

}, [])

return (

<div>

点击次数: { count }

<button onClick={onClickRef}>useRef</button>

</div>

)

}

6、useImperativeHandle

useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值，说简单点就是，子组件可以选择性的暴露给父组件一些方法，这样可以隐藏一些私有方法和属性，官方建议，useImperativeHandle 应当与 forwardRef 一起使用。

function Kun (props, ref) {

const kun = useRef()

const introduce = useCallback (() => {

console.log('i can sing, jump, rap, play basketball')

}, [])

// 这里用useImperativeHandle暴露了一个方法出去

useImperativeHandle(ref, () => ({

introduce: () => {

introduce()

}

}));

return (

<div ref={kun}> { props.count }</div>

)

}

const KunKun = forwardRef(Kun)

function App () {

const [ count, setCount ] = useState(0)

const kunRef = useRef(null)

const onClick = useCallback (() => {

setCount(count => count + 1)

// 这里使用暴露出来的方法，执行子组件的内部逻辑

kunRef.current.introduce()

}, [])

return (

<div>

点击次数: { count }

</div>

)

}

7、useReducer

useReducer 有点类似 redux 中的功能，相较于 useState，它更适合一些逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等特定场景。

useReducer 总共有三个参数:

第一个参数是一个 reducer，就是一个函数类似 (state, action) => newState 的函数，传入上一个 state 和本次的 action;

第二个参数是初始 state，也就是默认值，是比较简单的方法;

第三个参数是惰性初始化，这么做可以将用于计算 state 的逻辑提取到 reducer 外部，这也为将来对重置 state 的 action 做处理提供了便利。

function reducer(state, action) {

switch (action.type) {

case 'increment':

return {count: state.count + 1};

case 'decrement':

return {count: state.count - 1};

default:

throw new Error();

}

function App() {

const [state, dispatch] = useReducer(reducer, {

count: 0

});

return (

点击次数: {state.count}

<button onClick={() => dispatch({type: 'increment'})}>+</button>

<button onClick={() => dispatch({type: 'decrement'})}>-</button>

</>

);

}

好了，讲了那么多，我们似乎知道了 Hook 究竟是怎么一回事，说白了，其实 Hook 就是返回包含了更多逻辑的 State 以及改变 State 的方法。

接下来我们来自定义一个自己的钩子，以计数器来为例：

import React, { useState } from 'react';

// 编写我们自己的hook，名字以use开头

function useCounter(initialValue) {

// 接受初始化的值生成state

const [count, changeCount] = useState(initialValue);

// 声明减少的方法

const decrease = () => {

changeCount(count - 1);

}

// 声明增加的方法

const increase = () => {

changeCount(count + 1);

}

// 声明重置计数器方法

const resetCounter = () => {

changeCount(0);

}

// 将count数字与方法返回回去

return [count, { decrease, increase, resetCounter }]

}

export default function myHooksView() {

// 在函数组件中使用我们自己编写的hook生成一个计数器，并拿到所有操作方法的对象

const [count, controlCount] = useCounter(10);

return (

<div>

当前数量：{count}

</div>

)

}

本文主要参考文章：

https://www.cnblogs.com/ascoders/p/10591832.html、

https://blog.csdn.net/landl_ww/article/details/102158814

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

Machine Learning·instance analysis
基本流程：问题建模=》获取数据=》特征工程=》模型训练与验证=》模型诊断与调优=》线上运行实例背景：Kaggle-泰坦尼克号问题问题建模：带有label的监督学习，算法：逻辑回归数据摸底获取数据：观察数据，数据能不能用，进行数据摸底结合人的先验知识,分析数据的Index获救的年龄…...
2024/4/30 20:21:56
operator study Hard.13
package operator;public class Demo13 {public static void main(String[] args) {// 与（and）或（or）非（取反）boolean a = true;boolean b = false;System.out.println("a && b:"+(a&&b)); //逻辑与运算：两个变量值都为真，结果才为真Sys…...
2024/4/30 23:31:29
jdk8新特性-----Lambda表达式推导
还会慢慢完善，先把大概的发出来创建一个函数式接口定义一个接口，编写实现类，在主方法调用实现类。 /*** 推导lambda表达式*/ public class TestLambda {public static void main(String[] args) {ILike like = new Like();like.lambda();} }//定义一个函数是接口 interfac…...
2024/4/30 21:55:05
【学习笔记】零基础入门CV之街道字符识别-赛题理解
1.简介学习主题：零基础入门CV之街道字符识别。学习目标：通过赛题引导竞赛选手入门计算机视觉，提高对数据建模。 2.赛事介绍 2.1 赛题目标本次赛题的目标是识别出类似下图中的字符，例如下图中的数字“68”。图1 2.2 赛题数据数据集来源于Google街景图像中的门牌号数据集…...
2024/4/30 18:02:00
Centos7下Hadoop之单机搭建
Hadoop单机版环境搭建 centos7 hadoop 单机模式安装配置官网AI+BigData+云计算其实大部分安装过程这边文章(Hadoop单机版环境搭建)已经说的很清楚了,只是简单的说几个需要注意的点：安装包注意不要下成 source 或者 binary ,直接到 Release Note 去下载安装过程按照文章一步一…...
2024/5/1 1:11:50
label对齐，表单布局技巧
想要文本对齐，但是不想用空格& nbsp;怎么办，给label一个合适的宽度就可以解决问题。给label一个合适的width .updataInfo label{width: 120px; }...
2024/4/30 16:47:22
ROS系统中订阅者和发布者之间的延迟很大
为我的自动驾驶小车的坐标数据写了一个滤波算法。订阅原始的坐标数据topic_1，将坐标数据用算法滤波之后，以一个新的话题名topic_2发布。经过多次测试，滤波后的数据，延迟始终异常的大，在15s左右。起初以为是滤波算法复杂耗算力，但是打印出滤波算法的运行时间，运行时间很短…...
2024/4/30 23:26:39
「面试题」20+Vue面试题整理
0.那你能讲一讲MVVM吗？ MVVM是Model-View-ViewModel缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。…...
2024/4/30 17:56:45
5.20币圈资讯持有超0.1枚BTC的地址数量与去年相比增加14%
5.20币圈资讯持有超0.1枚BTC的地址数量与去年相比增加14% 韭菜币圈区块链今天 5.20币圈资讯持有超0.1枚BTC的地址数量与去年相比增加14%USDT占比特币交易比重约为66.27%金色财经消息，据cryptocompare数据显示，目前比特币交易情况按照交易币种排名，排在第一的是USDT，占比为…...
2024/4/23 15:12:52
统计学的Python实现-020：已知样本比例的抽样分布
作者：长行时间：2019.03.24统计学解释已知样本比例的抽样分布计算是一种理想的抽样分布算法，通常用来学习抽样理论。其已知的信息为总体的分布特征，并求在抽取一定容量的样本后，样本的分布特征。例如：已知1980年美国总统选举中，有3490万选民支持民主党，有4320万选民支…...
2024/4/23 15:12:52
基于redisson实现注解版分布式锁
文章目录配置自定义注解自定义切面实现使用配置配置文件singleServerConfig:#连接空闲超时，单位：毫秒idleConnectionTimeout: 10000pingTimeout: 1000#连接超时，单位：毫秒connectTimeout: 10000#命令等待超时，单位：毫秒timeout: 3000#命令失败重试次数retryAttempts: 3#…...
2024/4/23 15:12:57
restful运行应变
URI设计原则 1.动词+宾语动词通常就是五种 HTTP 方法，对应 CRUD 操作。 GET：读取（Read） POST：新建（Create） PUT：更新（Update） PATCH：更新（Update），通常是部分更新 DELETE：删除（Delete）根据 HTTP 规范，动词一律大写。 2.动词的覆盖当客户端仅支持Post和Get…...
2024/4/23 15:12:49
Mac zsh+oh-my-zsh配置
zsh+oh-my-zsh配置下载安装zsh解释器$ brew install zsh zsh-completions设置zsh为默认shell$ echo $(which zsh) >> /etc/shells $ chsh -s $(which zsh)查看当前shell$ echo $SHELL安装oh-my-zsh$ git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh…...
2024/4/23 15:12:49
nginx之ngx_hash
nginx之ngx_hash nginx使用了开放地址法解决哈希冲突，还有利用内存对齐使用的一些小技巧等等。下面是关于ngx_hash.h中的一些定义: /***先看nginx里面对hash每个元素的定义:*/ typedef struct {void *value;u_short len;u_char name[1]; }…...
2024/4/23 15:12:48
【每日打卡】多数元素
多数元素（简单） 2020年5月20日题目来源：力扣解题首先用比较熟悉的哈希表方法，记录个数还有出现次数最多的一个key值，最后输出这个key值。这种方法时间复杂度和空间复杂度都为O(n)。 class Solution {public int majorityElement(int[] nums) {Map<Integer,Integer&g…...
2024/4/23 15:12:53
Unity UGUI Canvas的三种适配模式
Canvas 的 Canvas Scaler 组件就是用来做适配的。 UI Scale Mode 设置为 Scale With Screen Size 时，可在下方设置一个默认尺寸。在 Editor上设计 UI 时就是根据这个默认尺寸进行布局。针对不同屏幕的分辨率，会根据 Screen Match Mode 中的适配模式，对默认尺寸进行缩放来实现…...
2024/4/23 15:12:52
统计学的Python实现-011：偏度
作者：长行时间：2019.03.10偏度：偏度（skewness），也称偏态，是衡量统计数据分布偏斜方向和程度的统计量。例如，正态分布的偏度=0，即分布关于均值左右对称。若偏度<0，则说明分布呈左偏态，此时均值左边的数据比右边少；若偏度>0，则说明分布呈右偏态，此时均值右…...
2024/4/23 15:12:44
python-列表推导式和if关联
今天遇到的问题.需要在判断一个关键词里找出相应的关键字.我第一次用的方法: def func(str_1):abc = Noneif (xx or xx or "xxx") in str(str_1):abc = "xxxx_1"elif (xx or xx or "xxx") in str(str_1):abc = "xxxx_2"return abc发现…...
2024/4/20 14:40:52
CDH6.3.2 组件版本和Maven依赖版本
目录remote repositorycomponent versiondependency templateartifact versionremote repository<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.…...
2024/4/17 3:59:13
Scala 求水仙花数的两种方法
import scala.collection.mutable.ArrayBufferobject ShuiXianHua {/*** 水仙花数：153=1^3+5^3+3^3*整数=个位数*总位数 + 十位数*总位数 + 百位数*总位数*/def main(args: Array[String]): Unit = {//方法一for (x <- 100 to 999){//定义数组：累计各位数val arr =ArrayBu…...
2024/4/20 17:06:31

React Hook使用☾超详细☽详解

相关文章

最新文章