React函数式组件Hook中的useEffect函数的详细解析
目录
- 前言
- useEffect的作用
- useEffect的使用？
- 1.class组件
- 2.函数式组件
- 总结
前言
React函数式编程没有生命周期，因此需要借助useEffect来实现。
useEffect的作用
- 发ajax请求获取数据
- 设置订阅/获取定时器
- 手动更改真实DOM
useEffect的使用？
1.class组件
在class组件中可以使用生命周期函数，知道组件触发的过程。
代码如下（示例）：
import React, { Component } from 'react'
export default class App extends Component {
constructor(p){
super(p)
this.state = {num: 0}
}
render() {
return (
<div>
<h2>{this.state.num}</h2>
<button onClick={this.addNum.bind(this)}>累加</button>
</div>
)
}
componentDidMount(){
console.log('Mount')
}
componentDidUpdate(){
console.log('Update')
}
componentWillUnmount(){
consoloe.log('Unmount')
}
addNum(){
this.setState({
num: this.state.num+1
})
}
}
生命周期（图）
2.函数式组件
函数式组件中没有自己的生命周期，需要使用useEffect模拟生命周期。
代码如下（示例）：
import React, { useState, useEffect } from 'react'
function App1(){
const [num, setNum] = useState(0);
const [num1, setNum1] = useState(1)
/*
1.第二个参数为空的情况：在初次渲染执行一次后，会监听所有数据的更新，数据更新则会触发useEffect()。（componentDidMount、componentDidUpdate）
2.第二个参数为[]的情况:回调函数只会在第一次render()后执行。（componentDidMount）
3.第二个参数为[监听的元素]:在初次渲染执行一次后，只会监听相应元素变化才会触发回调函数。（componentDidMount、componentDidUpdate）
4.useEffect体中使用了return为一个函数，会在组件卸载前执（componentWillUnmount）
*/
useEffect(()=>{
console.log('useEffect')
}, [num])
return (
<div>
<h1>{num}</h1>
<button onClick={()=>setNum(num+1)}>累加</button>
<h1>{num1}</h1>
<button onClick={()=>setNum1(num1+1)}>累加</button>
</div>
)
}
export default App1;
总结
语法和说明
useEffect(()=>{
// 在此可以执行任何带副作用操作
return ()=> { // 在组件卸载前执行
// 在此走一些收尾工作，如清除定时器/取消订阅等
}
},[stateValue])// 如果指定的是[]，回调函数只会在第一次render()后执行
//如果第二个参数不填，将会监听所有数据的更新
可以把useEffect Hook 看做如下三个函数的组合
- componentDidMount()
- componentDidUpdate()
- componentWillUnmount()
到此这篇关于React函数式组件Hook中的useEffect函数的详细解析的文章就介绍到这了,更多相关React useEffect内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
React中hook函数与useState及useEffect的使用
目录 1. 简介 2. useState使用 3. useEffect使用 useEffect发起网络请求 1. 简介 在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数组件,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖于类组件来获取数据,处理数据,并向下传递参数给 UI 组件进行渲染.React在v16.8 的版本中推出了 React Hooks 新特性,Hook是一套工具函数的集合,它增强了函数
-
React Hooks--useEffect代替常用生命周期函数方式
目录 useEffect代替常用生命周期函数 原始生命周期函数 对React Hooks(useState和useEffect) 的总结思考 一.为什么用React Hooks(面向生命周期编程变成了面向业务逻辑编程) 二.useState理解 三.useEffect的理解(原则:让你忘记类组件的生命周期的函数写法) 四.useState和useEffect声明时有先后顺序 useEffect代替常用生命周期函数 原始生命周期函数 componentDidMount componentDidUp
-
React-Hook中使用useEffect清除定时器的实现方法
目录 useEffect useEffect清除定时器 最后 useEffect 之前我们学习了class组件的声明周期,那么我们想在函数式组件中做一些声明周期有关操作能否实现呢?函数式组件中是没有生命周期的,所以就可以使用useEffect来替代.我们可以把useEffect看作组件加载.组件更新.组件卸载的三个生命周期方法的组合. 下面我们一起来通过案例学习useEffect的使用:1.这里需求是写一个点击事件让state累加,并且吧state展示在title上2.首先要导入React, {
-
React-hooks中的useEffect使用步骤
目录 1.理解函数副作用 什么是副作用? 常见的副作用 2.基础使用 使用步骤 示例代码 3.依赖项控制 useEffect 永远是在 DOM渲染完成之后执行 1.理解函数副作用 什么是副作用? 对于React组件来说,主作用是根据数据(state/props)渲染UI,除此之外都是副作用(比如手动修改DOM.发送ajax请求). 常见的副作用 数据请求(发送ajax) 手动修改 DOM localstorage操作 useEffect 函数的作用就是为react函数组件提供副作用 2.基础使用
-
React函数式组件Hook中的useEffect函数的详细解析
目录 前言 useEffect的作用 useEffect的使用? 1.class组件 2.函数式组件 总结 前言 React函数式编程没有生命周期,因此需要借助useEffect来实现. useEffect的作用 发ajax请求获取数据 设置订阅/获取定时器 手动更改真实DOM useEffect的使用? 1.class组件 在class组件中可以使用生命周期函数,知道组件触发的过程. 代码如下(示例): import React, { Component } from 'react' expo
-
React函数式组件Hook中的useState函数的详细解析
目录 前言 一.什么是函数式组件 二.useState 前言 公司项目需要使用react,而函数式组件也是官方比较推荐的!!!所以学习hooks是很重要的. 一.什么是函数式组件 纯函数组件有以下特点: 没有状态 没有生命周期 没有 this 因存在如上特点,使得纯函数组件只能做UI展示的功能, 涉及到状态的管理与切换就不得不用到类组件或者redux. 但因为简单的页面也是用类组件,同时要继承一个React实例,使得代码会显得很重. 以前我们可以使用class来声明一个组件,其实使用functi
-
React Hook中的useState函数的详细解析
useState => 让函数组件具有维持状态的能力useState 这个 Hook 是用来管理 state 的,它可以让函数组件具有维持状态的能力.即在一个函数组件的多次渲染之间,这个 state 是共享的. Hooks 的最大的作用就是可以让你在不编写class的情况下使用state以及其他的 React 特性 useState的详细解析 在上一篇文章中, 我用到useState来让大家体验一下hooks函数 import { memo, useState } from "react&
-
React函数式组件的性能优化思路详解
优化思路 主要优化的方向有2个: 减少重新 render 的次数.因为在 React 里最重(花时间最长)的一块就是 reconction(简单的可以理解为 diff),如果不 render,就不会 reconction. 减少计算的量.主要是减少重复计算,对于函数式组件来说,每次 render 都会重新从头开始执行函数调用. 在使用类组件的时候,使用的 React 优化 API 主要是:shouldComponentUpdate和 PureComponent 那么在函数式组件中,我们怎么做性能
-
React 函数式组件和类式组件详情
目录 前言 1. 函数式组件 2. 类式组件 前言 React 是 组件化的 的 JS 库,组件化 也是 React 的核心思想.使用 React 可以构建管理自身状态的封装组件,然后对其组合以构成复杂的 UI.那么什么是组件呢? 组件是用来实现局部功能效果的代码和资源的集合,包括 html / css / js/ image 等,组件的作用是 简化代码.复用代码.提高运行效率. React 里主要有两种类型的组件: 函数式组件 => 基于函数: 类式组件 => 基于类: 1. 函数式组件 函
-
使用 TypeScript 开发 React 函数式组件
目录 前言 如何使用 TypeScript 定义函数式组件 1. 使用 React.FC 2. 使用 JSX.Element 3. 直接定义完整类型 4. 使用 React.PropsWithChildren 使用过程需要注意的点 1. 函数式组件返回值不能是布尔值 2. 无法为组件使用 Array.fill() 填充 3. 支持使用泛型来创建组件 前言 在我们使用 React 开发项目时,使用最多的应该都是组件,组件又分为函数组件和类组件,我们可以这么定义: 定义函数组件: function
-
Java中的main函数的详细介绍
Java中的main函数的详细介绍 JAVA中的主函数是我们再熟悉不过的了,相信每个学习过JAVA语言的人都能够熟练地写出这个程序的入口函数,但对于主函数为什么这么写,其中的每个关键字分别是什么意思,可能就不是所有人都能轻松地答出来的了.我也是在学习中碰到了这个问题,通过在网上搜索资料,并加上自己的实践终于有了一点心得,不敢保留,写出来与大家分享. 主函数的一般写法如下: public static void main(String[] args){-} 下面分别解释这些关键字的作用: (1)p
-
Python中json.dumps()函数的使用解析
json.dumps将一个Python数据结构转换为JSON import json data = { 'name' : 'myname', 'age' : 100, } json_str = json.dumps(data) json库的一些用法 方法 作用 json.dumps() 将python对象编码成Json字符串 json.loads() 将Json字符串解码成python对象 json.dump() 将python中的对象转化成json储存到文件中 json.load() 将文件中
-
Mybatis中的config.xml配置文件详细解析
经过前面的文章,我觉得对Mybatis的正题理解已经足够了,但是对Mybatis的使用,我觉得还是会有一点的模糊,就我个人而言,我觉得掌握好Mybatis框架,主要要明白三个文件,第一个就是等下要谈论的Mybatis-comfig.xml文件,还有就是**Mapper.xml,以及我们所定义的Mapper类,理解了这三个东西,然后有sql的基础,还有java的基础的话,后面不论是使用基于xml的方法,还是基于java-based Configuration的方法,都会简单的多. 废话不多说,现在
-
React Hook中的useEffecfa函数的使用小结
目录 useEffect的详细解析 useEffecf基本使用 清除副作用(Effect) 使用多个useEffect useEffect性能优化 useEffect的详细解析 useEffecf基本使用 书接上文, 上一篇文章我们讲解了State Hook, 我们已经可以通过这个hook在函数式组件中定义state 我们知道在类组件中是可以有生命周期函数的, 那么如何在函数组件中定义类似于生命周期这些函数呢? Effect Hook 可以让你来完成一些类似于class中生命周期的功能; 事实上