Hooks详解（一）

在React中，创建组件的方式有两种：类式组件和函数式组件。对于刚刚学习react的我（小白）类式组件还是比较容易理解和学习，因为在之前有Vue的学习基础，React的类式组件和Vue的组件可以对比着进行学习，相对来说还是比较容易的。没有学习过类式组件的可以自行进行学习，在这里就不过多说明。本文章是本人在学习React Hooks所总结的，其中为了方便理解不乏一些大白话，望理解！
下面就开始Hooks的相关介绍吧！
对比类式组件来说函数式组件中没有状态和生命周期，这就是hooks所产生的原因，可以让函数式组件像类式组件一样，任意的进行使用。hooks中主要是一些hooks构造函数，这些钩子函数互相的搭配使用，实现我们想要的功能。hooks中的钩子函数主要包括:useState()、useEffect()、useCallbanck()、useMemo()、useref()、useContext()、**useRecuser()**这些，下面开始一个一个的进行说明。

useState()状态管理

通过useState()函数，我们就可以对函数式组件进行状态的设置和修改，首先这是一个无内容的App函数式根组件

import React from 'react'export default function App() {return (<div></div>)
}

由于useState()方法是react中的方法，我们要想使用就需要引入，我们引入并使用useState()方法

import React, { useState } from 'react'  //使用解构将useState引入export default function App() {const [name, setName] = useState('xiaoming')
const [age, setAge] = useState(100)return (<div>{name}-{age}</div>)
}

这时就在App组件中创建出了状态名为name，状态值为“xiaoming”的状态，状态创建出来后我们进行访问就直接{name}。状态创建后我们怎样修改呢？这里就用到了setName方法了。

import React, { useState } from 'react'  //使用解构将useState引入export default function App() {const [name, setName] = useState('xiaoming')
const [age, setAge] = useState(100)return (<div><buttononClick={() => {//修改状态调用上面定义的修改函数名，向函数中传入要修改为的值setName('xiaoli')setAge(90)}}>点击事件</button>App-{name}年龄-{age}</div>)
}

在事件函数中直接调用setName()将修改的值传入就可以了，在这里的效果就是点击按钮后name的值变为xiaoli,age的值变为90。
这样使用useState()方法后，该函数式组件就有状态了，并且可以创建多个状态。

useEffect(副作用函数)

在实际开发中，项目中的数据一般都是向后端发送请求得来的，在react中没有生命周期，我们发送请求的函数一般写在useEffect()函数中，那这个函数是怎样使用的呢。

useEffect()函数中有两个参数，第一个是一个回调函数，第二个是依赖数组
当数组为空，没有依赖时，useEffect()方法中的函数只会执行一次，状态发生变化组件更新也不会执行

import React, { useState，useEffect } from 'react'  //使用解构将useState引入export default function App() {const [name, setName] = useState('xiaoming')
useEffect(() => {}, [])return (<div>{name}</div>)
}

当数组中添加状态依赖后，该状态发生变化才会执行回调函数，其他状态改变也不会执行，数组中可以添加多个依赖，我理解的就相当于监听函数，当监听的状态发生变化才执行

import React, { useState，useEffect } from 'react'  //使用解构将useState引入export default function App() {const [name, setName] = useState('xiaoming')
useEffect(() => {console.log(1111111)
}, [name])return (<div>{name}</div>)
}

useEffect()的回调函数中，会return一个函数，当该组件销毁就会执行retuen的函数

import React, { useState，useEffect } from 'react'  //使用解构将useState引入export default function App() {const [name, setName] = useState('xiaoming')useEffect(() => {console.log("name状态值发生变化")return () => {console.log("组件销毁了")}}, [name])return (<div>{name}</div>)
}

useCallback(记忆函数)

场景：
我们定义了所有事件函数后，但组件的状态发生变化后，组件会更新状态重新渲染，我们定义的方法也会进行重新的定义和赋值即使方法没有变化，这样不利于优化，增加负担

在这里我们就使用useCallback方法，将我们定义的函数内容写在这个方法第一个参数中的回调函数中并且将useCallback方法函数赋予定义方法名（如下），第二个参数为依赖数组

import React, { useState，useCallback} from 'react'  //使用解构将useState引入export default function App() {const [num, setNum] = useState(0)var handleClick = useCallback(() => {setNum(num - 1)}, [num])return (<div><button onClick={handleClick}>-</button>{num}<buttononClick={() => {setNum(num + 1)}}>+</button></div>)
}

数组中没有依赖时，我们组件更新渲染也不会将我们定义的方法进行重新定义赋值,但是第二个数组参数为空时,就说明没有依赖,这时第一个参数的函数中变量是我们定义时的最初值,一直是不变的,要想进行更新,我们就需要将函数中使用的变量放入第二个数组参数中当作依赖,这时函数中的参数才会进行更新,当其他不相关状态进行更新时,就不会进行重新的定义

总体来说,在状态发生变化时,和该函数相关的状态就进行更新,不相关的还是最初定义的那个,不会在每次状态变化所以的函数都进行重新的定义了.

今天就先说这么多吧，大家也不要光看，自己练习完就非常的清楚了

Hooks详解（一）相关推荐

React Hooks 详解
文章目录为什么会有Hooks? 什么是Hooks? 一.userState():状态钩子二.useEffect():副作用钩子三.useContext():共享状态钩子四.useReducer ...
React中的Hooks详解
1.概述 React官方网站原文:Hooks 是一项新功能提案,可让您在不编写类的情况下使用 state(状态) 和其他 React 功能. 我总结了下使用Hooks的理由: 1.解决class中的代 ...
React Hooks详解
文章目录 React Hooks Hooks简介 Hook函数(9种) 自定义Hooks React Hooks Hooks简介介绍Hooks之前,首先要说一下React的组件创建方式,一种是类组件 ...
视频教程-React Hooks 案例详解（React 进阶必备）-其他
React Hooks 案例详解(React 进阶必备) Leo 1978年8月生,河北石家庄人. 曾任职中软股份. 计算科学导师: 刘坤起博士. 开发的<电商分销系统>获得淘宝Top10 ...
vue 时间插件_Vue3 插件开发详解尝鲜版「值得收藏」
作者:lishuai 转发链接:https://segmentfault.com/a/1190000022757326 前言 vue3.0-beta 版本已经发布了一段时间了,正式版本据说在年中发布( ...
php怎么自定义设置打印区域,JavaScript_jQuery实现区域打印功能代码详解，使用CSS控制打印样式，需要设 - phpStudy...
jQuery实现区域打印功能代码详解使用CSS控制打印样式,需要设置样式media="print",并且将页面中不需要打印的元素的样式display属性设置为none.如DEMO ...
C#环境下的钩子详解
C#环境下的钩子详解摘自网上供自己备查: http://www.csharpwin.com/csharpspace/2423.shtml 1. WINDOWS的消息机制 2. HOOK介绍 3. H ...
react-navigation(6.0.6版本)使用详解(基于RN0.65*版本)
命令安装 // 安装基础包 ^6.0.6 yarn add @react-navigation/native -S // 安装路由包 ^6.2.5 yarn add @react-navigation ...
Sentry For Vue 完整接入详解(2021 Sentry v21.8.x)前方高能预警！三万字，慎入！
内容源于:https://docs.sentry.io/platforms/javascript/guides/vue/ 系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创 ...

Hooks详解（一）

useState()状态管理

useEffect(副作用函数)

useCallback(记忆函数)

Hooks详解（一）相关推荐

最新文章

热门文章