React Hooks生命周期钩子

最新推荐文章于 2024-08-27 09:13:45 发布
最新推荐文章于 2024-08-27 09:13:45 发布
阅读量2k 收藏 6
点赞数 1
分类专栏： react 文章标签： react js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54740440/article/details/118280202
版权

React Hooks介绍

  • 对函数型组件进⾏增强, 让函数型组件可以存储状态, 可以拥有处理副作⽤的能⼒.
  • 让开发者在不使⽤类组件的情况下, 实现相同的功能.

Hooks 要解决的问题
1、缺少逻辑复⽤机制。为了复⽤逻辑增加⽆实际渲染效果的组件，增加了组件层级 显示⼗分臃肿，增加了调试的难度以及运⾏效率的降低
2、类组件经常会变得很复杂难以维护。将⼀组相⼲的业务逻辑拆分到了多个⽣命周期函数中在⼀个⽣命周期函数内存在多个不相⼲的业务逻辑
3、类成员⽅法不能保证this指向的正确性

React Hooks 使⽤
Hooks 意为钩⼦, React Hooks 就是⼀堆钩⼦函数, React 通过这些钩⼦函数对函数型组件进⾏增强, 不同的钩⼦函数提供了不同的功能

useState()：这个钩子的功能是可以让函数型组件可以保存状态，在现有的认知中，函数中的变量在执行完就会背释放掉，所以函数型组件原本是不可以保存数据的。useState这个钩子的内部使用闭包来实现保存数据的

import React, { useState } from "react";

function App(props) {
  const [count, setCount] = useState(() => {
    return props.count || 0
  })
  const [person, setPerson] = useState({name: '张三', age: 20})

  function handCound () {
    setCount(count => {
      return count + 2
    })
  }
  return (
    <div className="App">
     <div>{count}</div>
     <div>{person.name}-{person.age}</div>
      <button onClick={handCound}>+1</button>
      <button onClick={() => setPerson({name: '李四', age: 30})}>修改</button>
    </div>
  );
}

export default App;

1、接收唯⼀的参数即状态初始值. 初始值可以是任意数据类型.
2、 返回值为数组. 数组中存储状态值和更改状态值的⽅法. ⽅法名称约定以set开头, 后⾯加上状态名称
3、⽅法可以被调⽤多次. ⽤以保存不同状态值.
4、参数可以是⼀个函数, 函数返回什么, 初始状态就是什么, 函数只会被调⽤⼀次, ⽤在初始值是动态值的情况.
5、设置状态值⽅法的参数可以是⼀个值也可以是⼀个函数
6、设置状态值⽅法的⽅法本身是异步的

useReducer() 这个钩子的功能是让函数型组件保存状态，使用方式与Redux类似，useReducer的第一个参数是一个reducer函数，第二个参数是默认值，返回值是一个数组，第一个值为需要处理的状态，第二个值是dispatch函数，通过dispatch方法可以触发action执行reducer函数

import React, { useReducer } from "react";

function reducer (state, action) {
 switch (action.type) {
   case 'increment':
     return state + 1
 }
}
function App(props) {
 const [count, dispatch] = useReducer(reducer, 0)
 return (
   <div className="App">
    <div>{count}</div>
    <button onClick={() => dispatch({type: 'increment'})}>+1</button>
   </div>
 );
}

export default App;

useContext() 这个钩子的用途是跨组件传值，简化数据获取时的代码

// 不使用useContext
import React, { createContext } from "react";
const countContext = createContext()

function App(props) {
  return (
    <countContext.Provider value={100}>
      <Foo></Foo>
    </countContext.Provider>
  );
}

function Foo () {
  return (
    <countContext.Consumer>
      {
        value => {
          return <div>{value}</div>
        }
      }
    </countContext.Consumer>
  )
}

export default App;

// 使用useContext 
import React, { createContext, useContext } from "react";

const countContext = createContext()

function App(props) {
  return (
    <countContext.Provider value={110}>
      <Foo></Foo>
    </countContext.Provider>
  );
}

function Foo () {
  const value = useContext(countContext)
  return <div>{value}</div>
}

export default App;

useEffect() 让函数型组件拥有处理副作⽤的能⼒. 类似⽣命周期函数
可以把 useEffect 看做 componentDidMount, componentDidUpdate 和 componentWillUnmount 这三个函数的组合.
使用方法：
useEffect(() => {})
组件渲染完成、状态修改时执行

function App(props) {
  const [count, setCount] = useState(0)
  const [person, setPerson] = useState({name: '张三'})
  
  useEffect(() => {
    console.log('1111')
    document.title = count
  })
  return (
    <div>
      <span>{count}</span>
      <span>{person.name}</span>
      <button onClick={() => setCount(count + 1)}>添加</button>
      <button onClick={() => setPerson({name: '李四'})}>修改</button>
    </div>
  );
}

export default App;

useEffect(() => {}, [])
第二个参数为空数组，该钩子 在DOM渲染完成执行一次，当第二个参数指定了某个属性时，当该属性改变时，会再次触发这个钩子

import React, { useEffect, useState } from "react";


function App(props) {
  const [count, setCount] = useState(0)
  const [person, setPerson] = useState({name: '张三'})

  // 第二个参数为空数组，该钩子 在DOM渲染完成执行一次，当第二个参数指定了某个属性时，当该属性改变时，会触发更新
  // useEffect(() => {
  //   console.log('1111')
  //   document.title = count
  // }, [])

  useEffect(() => {
    console.log('1111')
    document.title = count
  }, [count])
  return (
    <div>
      <span>{count}</span>
      <span>{person.name}</span>
      <button onClick={() => setCount(count + 1)}>添加</button>
      <button onClick={() => setPerson({name: '李四'})}>修改</button>
    </div>
  );
}

export default App;

useEffect(() => () => {}) ，组件卸载前执行

useEffect 解决的问题：
1、 按照⽤途将代码进⾏分类 (将⼀组相⼲的业务逻辑归置到了同⼀个副作⽤函数中)
2、简化重复代码, 使组件内部代码更加清晰

useEffect中使用异步函数
useEffect中的参数函数不能是异步函数, 因为useEffect函数要返回清理资源的函数, 如果是异步函数就变成了返回Promise

 // 异步函数执行
  useEffect(() => {
    (async function () {
      let res = await axios.get()
    })()
  }, [])

useMemo()
useMemo 的⾏为类似Vue中的计算属性, 可以监测某个值的变化, 根据变化值计算新值
useMemo 会缓存计算结果. 如果监测值没有发⽣变化, 即使组件重新渲染, 也不会重新计算. 此⾏为可以有助于避免在每个渲染上进⾏昂贵的计算
调用useMemo钩子函数传递两个参数，第一个参数是回调函数，用来计算新值，第二个参数为需要检测的值，当检测的值发生变化，这个钩子函数就会被执行，useMemo 函数的返回值就是计算后的新值

import React, { useMemo, useState } from "react";


function App(props) {
  const [count, setCount] = useState(0)
  const [bool, setBool] = useState(true)

  const result = useMemo(() => {
    // 点击修改按钮，触发组件重新渲染，但是count值未发生改变，不会触发useMemo钩子
    console.log('111')
    return count * 2
  }, [count])
  return (
    <div>
      <span>{count}---{result}</span>
      <span>{bool ? '真': '假'}</span>
      <button onClick={() => setCount(count + 1)}>添加</button>
      <button onClick={() => setBool(!bool)}>修改</button>
    </div>
  );
}

export default App;

memo ⽅法
性能优化, 如果本组件中的数据没有发⽣变化, 阻⽌组件更新. 类似类组件中的 PureComponent 和 shouldComponentUpdate

import React, { useState, memo } from "react";

function App(props) {
  const [count, setCount] = useState(0)
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>添加</button>
      <Foo/>
    </div>
  );
}

// memo 方法接收一个组件作为参数，并返回一个新的组件，
// 判断这个组件中数据是否发生变化，如果数据没发生变化，则阻止更新
const Foo = memo(function Foo() {
  console.log('Foo重新渲染')
  return <div>我 是Foo</div>
})

export default App;

useCallback()
性能优化, 缓存函数, 使组件重新渲染时得到相同的函数实例.

import React, { useState, memo } from "react";

function App(props) {
  const [count, setCount] = useState(0)
  // 将计数器属性重置
  const resetCount = () => {
    setCount(0)
  }
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>添加</button>
      {/* 将resetCount方法传给子组件 */}
      <Foo resetCount={resetCount}/>
    </div>
  );
}

// memo 方法接收一个组件作为参数，并返回一个新的组件，
// 判断这个组件中数据是否发生变化，如果数据没发生变化，则阻止更新
const Foo = memo(function Foo(props) {
  console.log('Foo重新渲染')
  return <div>
    我 是Foo
    <button onClick={props.resetCount}>重置</button>
  </div>
})
// 点击重置按钮，若count值发生修改，则触发组件重新渲染
// 生成新的resetCount实例，子组件检测到实例发生变化，更新子组件
export default App;

点击重置按钮，若count值发生修改，则触发组件重新渲染，生成新的resetCount实例，子组件检测到实例发生变化，更新子组件，而实际上子组件的值并未发生变化，使用useCallback可解决这个问题

import React, { useState, memo, useCallback } from "react";

function App(props) {
  const [count, setCount] = useState(0)
  // 将计数器属性重置
  // const resetCount = () => {
  //   setCount(0)
  // }
  const resetCount = useCallback(() => setCount(0), [setCount])
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>添加</button>
      {/* 将resetCount方法传给子组件 */}
      <Foo resetCount={resetCount}/>
    </div>
  );
}

// memo 方法接收一个组件作为参数，并返回一个新的组件，
// 判断这个组件中数据是否发生变化，如果数据没发生变化，则阻止更新
const Foo = memo(function Foo(props) {
  console.log('Foo重新渲染')
  return <div>
    我 是Foo
    <button onClick={props.resetCount}>重置</button>
  </div>
})

export default App;

useRef()
1、获取DOM元素对象
2、 保存数据 (跨组件周期)，即使组件重新渲染, 保存的数据仍然还在. 保存的数据被更改不会触发组件重新渲染.

import React, { useRef } from "react";
function App(props) {
  const D = useRef()
  return (
    <div ref={D}>
      <span>kajsdh</span>
      <button onClick={() => console.log(D)}>获取DOM</button>
    </div>
  );
}
// 最终得到一个current对象：{current: div}  
export default App;


import React, { useRef, useState, useEffect } from "react";

function App(props) {
  const [count, setCount] = useState(0)
  // 保存数据 (跨组件周期)，即使组件重新渲染, 保存的数据仍然还在. 保存的数据被更改不会触发组件重新渲染.
  let timer = useRef()

  useEffect(() => {
    timer.current = setInterval(() => {
      setCount(count => count + 1)
    }, 1000);
  }, [])

  const stopInter = () => {
    clearInterval(timer.current)
  }
  return (
    <div>
      <span>{count}</span>
      <button onClick={stopInter}>停止定时器</button>
    </div>
  );
}
export default App;
凡尘_09
关注
专栏目录
面试题：Hooks 与 React 生命周期的关系
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
07-29 2527
你真的了解 React 生命周期吗？React 生命周期很多人都了解，但通常我们所了解的都是 单个组件 的生命周期，但针对 Hooks 组件、多个关联组件（父子组件和兄弟...
React 生命周期、Hooks
Rêve
07-07 1704
react 生命周期是组件实例从创建运行到销毁的一系列过程 componentDidMount (挂载时) componentDidUpdate （更新时） componentWillUnmount （卸载时） Hook 是一些可以让你在函数组件里"钩入" React state 及生命周期等特性的函数,Hook 不能在class 组件中使用，常用Hook: useState()、useEffect()、useRef()、useContext()…… Hook 的特点 – 在组件之间复用状态逻辑，无需修改组
使用useEffec来分别模拟class的生命周期
weixin_45868552的博客
07-18 2394
一、useEffect useEffect 拥有两个参数，第一个参数作为回调函数会在浏览器布局和绘制完成后调用，因此它不会阻碍浏览器的渲染进程。 第二个参数是一个数组: 当数组存在并有值时，如果数组中的任何值发生更改，则每次渲染后都会触发回调。 当它不存在时，每次渲染后都会触发回调。 当它是一个空列表时，回调只会被触发一次，类似于 componentDidMount。 二、componentDidMount（组件挂载完的时刻） 1、class 组件访问 componentDidMount class Ex
React Hooks 生命周期项目教程
最新发布
gitblog_00578的博客
08-27 259
React Hooks 生命周期项目教程 react-hooks-lifecycle⚛️ ???? ⏳ React hooks lifecycle diagram: Functional components lifecycle explained项目地址:https://gitcode.com/gh_mirrors/re/react-hooks-lifecycle 1. 项目的目录结构及介绍 rea...
React Hooks生命周期
qq_43205326的博客
04-23 2888
最近在写react项目，所以一直想写函数组件和类组件生命周期相关的一些知识总结。基础知识，仅用来复习，和巩固学习。
React之ReactHook与生命周期
梦想成为全栈的切图仔
10-12 1446
useEffect 和 useLayoutEffect的区别： 修改DOM，改变布局就用useLayoutEffect，其它全用useEffect。问： useEffect 与 componentDIdMout 以及 componentDidUpdate执行时机有什么样的区别？答：useEffect对react是异步执行，而componentDIdMount 以及 componentDidUpdate是同步执行。useEffect不会阻塞游览器绘制。
reacthooks101:学习ReactHooks并制作一些定制钩子的东西:rocket:
05-23
ReactHooks101 实用的React挂钩： 与Nomad Coders一起来学习 目标 让我们总结一下React Hooks的概念。 :dog_face: 让我们通过ToDoApp Hooks制作ToDoApp :cat_face: Hooks TodoApp演示 创建一个自定义钩子 :rabbit...
tetris-reacthooks:用React钩子制作的俄罗斯方块俄罗斯方块游戏
04-04
React Hooks是自React 16.8版本起引入的一个重大特性，它允许我们在函数组件内部使用状态和生命周期方法。主要的Hooks包括useState、useEffect、useRef、useCallback等，它们提供了类组件中的state、生命周期、引用...
React Hooks 介绍及与传统 class 组件的生命周期函数对比
诗渊的博客
11-17 3468
React Hooks 介绍 及与传统 class 组件的生命周期函数对比 为什么要使用 Hooks 在 React 16.8 之前，函数组件也称为无状态组件，因为函数组件也不能访问 react 生命周期，也没有自己的状态。react 自 16.8 开始，引入了 Hooks 概念，使得函数组件中也可以拥有自己的状态，并且可以模拟对应的生命周期。 我们应该在什么时候使用 Hooks 呢？ 官方并不建议我们把原有的 class 组件，大规模重构成 Hooks，而是有一个渐进过程: 首先，原有的函数组件如果需要自
vue生命周期和react生命周期对比【推荐】
10-18
对于Vue和React的生命周期对比，我们可以发现Vue提供了更多的生命周期钩子，使开发者可以更细致地控制组件的创建、挂载、更新和销毁过程。而React虽然钩子函数相对较少，但使用新的函数式组件和Hooks API可以实现...
react-解释ReactHooks组件的新生命周期的流程图
08-14
解释React Hooks组件的新生命周期的流程图
react生命周期及hooks
Howhanh的博客
11-29 1861
生命周期(新旧对比) 旧版生命周期 旧版生命周期 指的是 React 16.3 及其之前的版本。 新版生命周期 static getDerivedStateFromProps static getDerivedStateFromProps(nextProps,prevState)：接收父组件传递过来的 props 和组件之前的状态，返回一个对象来更新 state 或者返回 null 来表示接收到的 props 没有变化，不需要更新 state. 该生命周期钩子的作用： 将父组件传递过来的 pro
React Hooks函数useEffect实现生命周期函数
runrun117的博客
09-02 963
React Hooks函数useEffect实现生命周期函数
React生命周期钩子函数详解
前端、python爱好者
08-23 864
React生命周期钩子函数 声明：资料来自尚硅谷张天禹讲师，做了总结，仅供学习参考 图解【旧】 /* 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染 1. constructor() 2. componentWillMount() 3. render() 4. componentDidMount() =====> 常用 一般在这个钩子中做一些初始化的事，例如：开启定
极品-React生命周期详情,hooks
ITMA_的博客
07-29 342
React生命周期 常用的生命周期的方法有： 1.constructor() constructor()中完成了React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。 注意：只要使用了constructor()就必须写super(),否则会导致this指向错误。 constructor(props) { super(props) this.state = { co
react生命周期&hooks
ly1477868382的博客
01-18 428
shouldComponentUpdate:组件更新前调用，用于判断是否需要进行组件的重新渲染，默认返回true,可以根据属性或状态的变化进行优化，避免不必要的渲染。componentWillUnmount：组件卸载前调用，在这里可进行一些清理操作，比如取消订阅、清除定时器。componentDidUpdate：组件更新后调用，在这里可以根据属性或状态变更的变化进行相应的处理。componentDidMount：组件挂载后调用，在这里可进行数据初始化、订阅事件操作。
Hooks 与 React 生命周期
weixin_42325823的博客
11-10 334
Hooks 与 React 生命周期
react生命周期
qq_48954441的博客
11-07 312
他们的不同点： 挂载阶段1. constructor（hooks里不用）: 构造函数，最先被执行，我们通常在构造函数里初始化state对象或者给自定义方法绑定this 2. render, render函数只返回需要渲染的东西，不应该包含其他业务逻辑，可以返回原生的DOM React组件等内容 3. componentDidMount:组件装载之后调用，此时可以获取到DOM节点并操作，以及请求，如果是定时器、订阅之类的 记得在componentWillUnmount中销毁 更新阶段 1.
react-hooks生命周期
05-25
由于函数组件没有类组件的生命周期方法，React Hooks 提供了一些新的钩子函数来处理组件的生命周期。 下面是 React Hooks 中常用的生命周期函数： 1. `useEffect`: 相当于类组件的 `componentDidMount`, `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值