React-Hooks useState,useEffect用法

2024-02-18 17:38
文章标签 javascript react 用法 frontend hooks useeffect usestate

本文主要是介绍React-Hooks useState,useEffect用法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

定义

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

useState

通过在函数组件里调用它来给组件添加一些内部 state。useState 会返回一对值：当前状态和一个让你更新它的函数，你可以在事件处理函数中或其他一些地方调用这个函数。useState 唯一的参数就是初始 state。这个初始 state 参数只有在第一次渲染的时候会被用到。

使用useState可以声明多个state变量。

不使用useState的时候，我们会发现一个最麻烦的问题，就是要去维护this，因为我们知道，每一个class类的this，都是要从父组件继承的，本身是没有this的，所以需要使用constructor去初始化this。
而useState，让我们使用函数编程，我们之前写无状态组件的时候，用的就是函数编程，而使用useState之后，我们可以在函数编程里面使用状态。也就是说：count变成了函数里面的变量，setCount变成了函数里面的函数变量，那么使用的时候直接使用就行了，不再需要使用this
useState接收一个参数，返回的是一个数组，参数表示初始值，数组的第0项就是定义的变量，第1项就是改变变量的方法。
参数可以是基本数据类型，如string、number，也可以是复合数据类型，如array，object等，如下代码

import React, { useState } from 'react'
export default function App() {const [count, setCount] = useState(0)const [obj, setObj] = useState({name: "aaa"})const [arr, setArr] = useState([1,2,3])return (<div><div>{count}</div><button onClick={() => { setCount(count + 1) }}>add</button><div>{obj.name}---{obj.age}</div><button onClick={() => { setObj({...obj,age: 20,name: "bbb"}) }}>add</button>{arr.map(item => {return <div>{item}</div>})}<button onClick={() => { setArr([...arr, 4]) }}>add</button></div>)
}

基本数据类型，可以直接修改，而复合数据类型，需要先通过解构运算符，然后再设置成新的复合数据类型。 

useEffect

useEffect （副作用函数）是一个 Effect Hook，给函数组件增加了操作副作用(在 React 组件中进行数据获取、订阅或者手动修改 DOM等)的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API，默认情况下，React 会在每次渲染后调用副作用函数 ，包括第一次渲染的时候。

通过使用 Hook，你可以把组件内相关的副作用组织在一起（例如创建订阅及取消订阅），而不要把它们拆分到不同的生命周期函数里。

useEffect接收一个函数作为参数，会在页面加载完成的时候以及数据更新的时候，触发执行。

上面实例每次重新渲染都要执行一遍useEffect，如果你在useEffect中使用了useState则会导致无限循环，这样显然是影响性能的。为了处理这个问题，我们可以给useEffect传第二个参数。用第二个参数来告诉react只有当这个参数的值发生改变时，才执行我们传的副作用函数（即第一个参数）。

当我们第二个参数传一个空数组[]时，相当于只在首次渲染的时候执行。

import React,{Component, useState,useEffect} from 'react'
import './App.css';class App2 extends Component{state = {count:0,size:{width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,}}onResize=()=>{this.setState({size:{width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,}})}componentDidMount(){document.title = this.state.count;window.addEventListener('resize',this.onResize);}componentWillUnmount(){window.removeEventListener('resize',this.onResize);}componentDidUpdate(){document.title = this.state.count;}render(){const {count,size} = this.state;return (<button type="button" onClick={()=>{this.setState({count:count+1})}}>click{count}size:{size.width}*{size.height}</button>);}
}function App(props) {// const [count,setCount] = useState(()=>{//   //提供一个函数，提高初始效率//   return props.defaultCount||0// });const [count,setCount] = useState(0);const [size,setSize] = useState({width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,})const onResize = ()=>{setSize({width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,})}useEffect(()=>{    //我们传递了第二个参数为一个空数组，它表示不监听任何数值，那么useEffect就只会在页面加载完成的时候触发一次，而count更新的时候不会触发。如果想要count更新的时候触发，则在数组内添加参数console.log('count',count)},[count])//useEffect统一在渲染后调用useEffect(()=>{   //didmount，didupdatedocument.title = count;})//每次渲染后都运行，加一个【】，绑定的函数只会发生在第一次渲染后，并且在组件卸载之前才会运行绑定函数
//我们都知道定时器在页面销毁的时候，需要清除，我们一般都会在componentUnMount，页面销毁的时候去把定时器清除，那么使用useEffect是如何清除呢？其实很简单，只需要在第一个参数的函数里面，return一个函数，函数里面写清除的方法就行了。这样在页面被卸载的时候，就会把定时器清除useEffect(()=>{    //didmount，willUnmountwindow.addEventListener('resize',onResize);return ()=>{window.removeEventListener('resize',onResize);}},[])const onClick=()=>{console.log('click');}useEffect(()=>{  document.querySelector('#size').addEventListener('click',onClick,false)return ()=>{  //清理状态，获取最新状态document.querySelector('#size').removeEventListener('click',onClick,false)}})return (<><button type="button" onClick={()=>{setCount(count+1)}}>click{count}</button>{count%2?<span id="size">size:{size.width}*{size.height}</span>:<p id="size">size:{size.width}*{size.height}</p>}</>);
}export default App;

//在使用useEffext处理title和size的时候，写了两个useEffect，不同的逻辑做不同的事情，这就是关注点分离

// 1、提高了组件复用

// 2、优化了关注点分离

// 两个函数的区别在于第二个参数，空数组，是精髓，只有数组的每一项都不变，所以只有第一次被渲染的时候才会被调用

 

 

 

这篇关于React-Hooks useState,useEffect用法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/721929。

相关文章

SpringBoot3.4配置校验新特性的用法详解

SpringBoot3.4配置校验新特性的用法详解

《SpringBoot3.4配置校验新特性的用法详解》SpringBoot3.4对配置校验支持进行了全面升级,这篇文章为大家详细介绍了一下它们的具体使用,文中的示例代码讲解详细,感兴趣的小伙伴可以参考... 目录基本用法示例定义配置类配置 application.yml注入使用嵌套对象与集合元素深度校验开发
阅读更多...
SpringBoot UserAgentUtils获取用户浏览器的用法

SpringBoot UserAgentUtils获取用户浏览器的用法

《SpringBootUserAgentUtils获取用户浏览器的用法》UserAgentUtils是于处理用户代理（User-Agent）字符串的工具类,一般用于解析和处理浏览器、操作系统以及设备... 目录介绍效果图依赖封装客户端工具封装IP工具实体类获取设备信息入库介绍UserAgentUtils
阅读更多...
Java中的@SneakyThrows注解用法详解

Java中的@SneakyThrows注解用法详解

《Java中的@SneakyThrows注解用法详解》：本文主要介绍Java中的@SneakyThrows注解用法的相关资料,Lombok的@SneakyThrows注解简化了Java方法中的异常... 目录前言一、@SneakyThrows 简介1.1 什么是 Lombok？二、@SneakyThrows
阅读更多...
Python中的getopt模块用法小结

Python中的getopt模块用法小结

《Python中的getopt模块用法小结》getopt.getopt()函数是Python中用于解析命令行参数的标准库函数,该函数可以从命令行中提取选项和参数,并对它们进行处理,本文详细介绍了Pyt... 目录getopt模块介绍getopt.getopt函数的介绍getopt模块的常用用法getopt模
阅读更多...
mysql中的group by高级用法

mysql中的group by高级用法

《mysql中的groupby高级用法》MySQL中的GROUPBY是数据聚合分析的核心功能,主要用于将结果集按指定列分组,并结合聚合函数进行统计计算,下面给大家介绍mysql中的groupby用法... 目录一、基本语法与核心功能二、基础用法示例1. 单列分组统计2. 多列组合分组3. 与WHERE结合使
阅读更多...
Java中Scanner的用法示例小结

Java中Scanner的用法示例小结

《Java中Scanner的用法示例小结》有时候我们在编写代码的时候可能会使用输入和输出,那Java也有自己的输入和输出,今天我们来探究一下,对JavaScanner用法相关知识感兴趣的朋友一起看看吧... 目录前言一 输出二 输入Scanner的使用多组输入三 综合练习：猜数字游戏猜数字前言有时候我们在
阅读更多...
java解析jwt中的payload的用法

java解析jwt中的payload的用法

《java解析jwt中的payload的用法》：本文主要介绍java解析jwt中的payload的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java解析jwt中的payload1. 使用 jjwt 库步骤 1：添加依赖步骤 2：解析 JWT2. 使用 N
阅读更多...
HTML5中的Microdata与历史记录管理详解

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M
阅读更多...
html5的响应式布局的方法示例详解

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》：本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法，简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局，详细内容请阅读本文，希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的
阅读更多...
HTML5表格语法格式详解

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中，表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式，感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中，表格主要通过< tab
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2