react中关于hook介绍及其使用，web前端开发自学视频

最新推荐文章于 2024-10-04 13:18:14 发布

阿里P6+

最新推荐文章于 2024-10-04 13:18:14 发布

阅读量299

点赞数 3

分类专栏： 2024年程序员面试文章标签：前端 react.js javascript

本文链接：https://blog.csdn.net/m0_55025322/article/details/136908259

版权

2024年程序员面试专栏收录该内容

13 篇文章 1 订阅

订阅专栏

那么接下来所要介绍的部分就是如何去使用hook

state hook

对于使用过class组件的同学，相信对于state肯定有很深的印象，对于一些需要用到的全局变量，在class组件中我们常常采用的方式是this.state = {}，但是在hook中我们采用的方式就是使用useState这个hook，然后就可以对这种全局变量进行引用，在引用时只需要用其变量名即可，这里就拿官网的例子来举例：

import React, { useState } from ‘react’;

function Example() {

// 声明一个叫 “count” 的 state 变量

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

return (

You clicked {count} times

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

Click me

);

}

在上面的这个例子中，我们设置变量方式采用的就是const [count, setCount] = useState(0)这种方式，其中的0就是给count赋初值为0，如果想要给count赋值为一个空对象，那么只需要const [count, setCount] = useState({})，这样的方式就行了，那么这样你在用count时，此时获取到的值就为一个空对象。

作用：返回一个state，以及更新state的函数
函数式更新：新的state需要通过使用先前的state计算得出，将函数传递给setState,该函数将接收先前的state，并返回一个更新后的值
惰性初始state，initialState参数只会在组件的初始渲染中起作用，如果初始化state需要通过一个复杂计算来获取，则可以传入一个函数，在函数中计算并返回初始的state，此函数只在初始渲染时被掉用，如下所示：

const [state, setState] = useState(() => {

const initialState = someExpensiveComputation(props);

return initialState;

})

在hook中如何给全局变量设置值

在class组件中我们给放在state中的变量赋值时，通常采用的方式就是this.setState(）这种方式，那么在hook中所要采用的就是set+变量名这种方式，如

const [count, setCount] = useState(0)

在这里通过上面我们已经知道的就是count能够获取到值，那么其所对应的setCount(值)，这种赋值的方式就是给count变量赋值的，然后通过count就能够获取到值。

为什么要采用这种方式呢？
原因：是因为react中的单向数据源，这样的话，能够保证你的数据源流向会更加的清楚，这也是react所区别于vue中双向数据源绑定的一点

hook中设置多个全局变量的方式

在hook中，如果我们需要去设置多个类似于上面所说的count，那么就需要多次使用useState这个hook，当然你也可以设置一个变量在hook的最外部，即在hook这个函数组件的外部。需要注意的是别在整个hook这个函数的全局设置，因此在hook的运行机制中，在每次加载时，都会从新去加载里面的变量，因此你是不能够去获取到在整个函数内部中使用该变量所改变的值的，能够获取到的就只是这个变量的初始值*

useEffect hook

对于useEffect hook，其用途类似于class组件中的生命周期函数，用来处理在一些特定时刻需要去做的事情，这种事情常被叫做副作用。在使用useEffect这个hook时，需要注意的一点就是其不能够被包含在循环，判断语句中，否则项目会出现报错，这也是hook的一种设置机制

副作用的划分：
不需要清除的：在React更新DOM之后运行一些额外的代码：如：发送网络请求，手动变更DOM，记录日志等
需要清除的：当使用外部数据源时，需要去清除数据，如：定时器，需要我们在结束的时候去清除
渲染时机：在使用useEffect这个hook时，需要注意的就是其渲染的时机，默认情况下会在第一次渲染和每一次更新时去执行。对于如何去控制这个渲染时机，在下面的一个部分会有详细的介绍
作用：告诉组件在渲染之后执行某些操作
useEffect放在组件内部调用的原因：可以在effect中直接访问state中的变量
effect返回函数：effect可选的清除机制，每个effect都可以返回一个清除函数
接收内容：一个包含命令式、并且可能有副作用代码的函数
清除effect：实现方式，effect函数需要返回一个清除函数
effect执行时机：在浏览器完成布局和绘制之后，传给useEffect的函数会延迟调用，因此不应该在函数中执行足赛浏览器更新屏幕的操作。
默认条件执行：会在每轮组件渲染完成后执行，因而一旦effect的依赖发生变化，他就会被重新创建。要改变其执行时机，需要给useEffect传递第二个参数，只有当第二个参数值发生改变才会重新创建订阅。如果要使用这个优化的方式，需要确保数组包含了所有外部作用域中会发发生变化，且在effect中使用的变量。如果只想运行一次effect，可以传递一个空数组作为第二个参数。

对于useEffect的初步认识只需要了解上面的即可。接下来就来介绍一个官网的实例，来说明useEffect

import React, { useState, useEffect } from ‘react’;

function Example() {

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

// Similar to componentDidMount and componentDidUpdate:

useEffect(() => {

// Update the document title using the browser API

document.title = You clicked ${count} times;

});

return (

You clicked {count} times

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

Click me

);

}

在上面的这段代码中，就使用到了useEffect这个hook，在每次count值改变时，就会在页面中去打印“You clicked ${count} times”这段文字，当然count肯定对应的就是其所对应的值。

useEffect去取代calss中的生命周期函数的方式

react中有状态组件中，其生命周期函数的各个阶段

在Mounting阶段

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

Updating

static getDerivedStateFormProps
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

UnMouting

componentWillUnmount()

使用hook去代替生命周期函数的方式

这里就介绍了关于useEffect这个hook的使用，有一些生命周期函数就是通过该hook来实现的，这里推荐一篇文章https://blog.logrocket.com/guide-to-react-useeffect-hook/，可以参考下。这里是在参考了一些文章后写的，具体介绍如下：

constructor: 可以通过useState来初始化state
componentDidMount(),在hook中需要使用下面的这种方式去取代，在useEffect中传递第二个参数，该参数为一个空数组，只会去执行一次，如下面所示

useEffect(() => {

},[])

componentDidUpdate(),有两种方式去解决

在每次渲染的时候都去调用hooks，解决的方式如下面所示

useEffect(() => {

})

用一个特殊变量的去触发hook,如下面所示,count指的就是这个特殊的变量，该hook触发，只会是count的值改变时

useEffect(() => {

},[count])

componentWillUnmount(),用hook来代替，需要去return一个callback(回调函数)，如下面的形式所示

useEffect(() => {

return () => {

//执行的为componentWillUnmount

}

},[])

shouldComponentUpdate()，常使用React.memo来代替,在默认情况下，它将对props对象中的复杂对象进行浅层比较，如果想要去控制比较，可以去提供一个自定义的比较函数作为第二个参数。代替hook的方式如下所示

import React from ‘react’

function areEqual(prevProps, nextProps) {

return true if passing nextProps to render would return

the same result as passing prevProps to render,

otherwise return false

}

const Weather = ({weather}) => {

return (

{weather.city}

{weather.temperature}

{console.log(‘Render’)}

)

}

export default React.memo(Weather, areEqual)

自定义hook

通常在实际的项目开发中少不了使这种自定义的hook，前提是在整个项目中使用了hook的情况下。通常情况下就是去使用useState，useEffect这种系统已经定义好的hook去实现，在调用时你就可以直接调用当你自定义好的hook来实现你所需要的功能。下面就以自定义useReducer这个hook为例

import React, { useEffect } from ‘react’

function useReducer(reducer, initialState) {

const [state, setState] = useState(initialState);

function dispatch(action) {

const nextState = reducer(state, action);

setState(nextState);

}

return [state, dispatch];

}

export default useReducer

在上面的这个实际例子中，我们封装了一个自定义的useReducerhook，我们可以调用这个hook去完成与reducer一样的功能了，在调用是就需要我们去传入两个参数，一个就是reducer，另外一个就是initialState，然后就能够取得state,以及dispatch方法。注意这里的返回值使用的是一个数组，这样的好处就是我们在获取其返回值时，可以采用数组结构这种方式来获取。具体关于数组的结构可以去看看es6中的部分，就能够明白了。那么接下来就是使用这个自定义好的useReducer。使用方式如下

import useReducer form ‘你封装useRecuer的组件中’

function Todos() {

const todosReducer = ( state, dispatch) => {

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。