React hooks 大全详情

这篇具有很好参考价值的文章主要介绍了React hooks 大全详情。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

hook 是react 16.8的新增特性 ,他可以让你不在编写class的情况下shiystate以及react的特性
Hooks的出现,首先解决了以下问题:
  1. 告别了令人疑惑的生命周期
  2. 告别类组件中烦人的this
  3. 告别繁重的类组件,回归到了熟悉的函数组件
react 整个思想上面的转变,从“面向对象”的思想转为“函数式编程”,所以你会突然发现会多了一些新概念 比如:纯函数,副作用,柯里化,高阶函数等概念
 

useState 

 

 1.基础使用

import { useState } from 'react'
function App() {
    // 参数:状态初始值比如,传入 0 表示该状态的初始值为 0
    // 返回值:数组,包含两个值:1 状态值(state) 2 修改该状态的函数(setState)
    const [count, setCount] = useState(0);
    //   修改count内容
    const modifyEvent = () => {
        setCount(count + 1)
    }
    return (
        <button onClick={() => modifyEvent()}>{count}</button>
    )
}
export default App

 

 2.状态的读取和修改执行流程与逻辑

  读取状态:该方式提供的状态,是函数内部的局部变量,可以在函数内的任意位置使用
  修改状态:

    1.setCount是一个函数,参数表示最新的状态值

    2.调用该函数后,将使用新值替换旧值

    3.修改状态后,由于状态发生变化,会引起试图变化 注意

  事项:修改状态的时候,一定要使用新的状态替换旧的状态,不能直接修改旧的状态,尤其是引用类型

 

3. 组件的更新过程

  函数组件使用 useState hook 后的执行过程,以及状态值的变化

  1.组件第一次渲染

  • 从头开始执行该组件中的代码逻辑
  • 调用 useState(0) 将传入的参数作为状态初始值,即:0
  • 渲染组件,此时,获取到的状态 count 值为: 0

  2.组件第二次渲染

  • 点击按钮,调用 setCount(count + 1) 修改状态,因为状态发生改变,所以,该组件会重新渲染
  • 组件重新渲染时,会再次执行该组件中的代码逻辑
  • 再次调用 useState(0) ,此时 React 内部会拿到最新的状态值而非初始值,比如,该案例中最新的状态值为 1
  • 再次渲染组件,此时,获取到的状态 count 值为:1
注:useState 的初始值(参数)只会在组件第一次渲染时生效。也就是说,以后的每次渲染,useState 获取到都是最新的状态值,React 组件会记住每次最新的状态值 
import { useState } from 'react'
 
function App() {
  const [count, setCount] = useState(0)
  // 在这里可以进行打印
  console.log(count,'渲染了')
  return (
    <button onClick={() => { setCount(count + 1) }}>{count}</button>
  )
}
export default App

 4.使用规则

  1.useState 函数可以执行多次,每次执行互相独立,每调用一次为函数组件提供一个状态
function List(){
  // 以字符串为初始值
  const [name, setName] = useState('cp')
  // 以数组为初始值
  const [list,setList] = useState([])
}

  2.useState 注意事项

  • 只能出现在函数组件或者其他hook函数中
  • 能嵌套在if/for/其它函数中(react按照hooks的调用顺序识别每一个hook)

 

useEffect

1.理解函数副作用

   副作用是相对于主作用来说的,一个函数除了主作用,其他的作用就是副作用。对于 React 组件来说,主作用就是根据数据(state/props)渲染 UI,除此之外都是副作用(比如,手动修改 DOM)
  常见的副作用:
  • 数据请求 ajax发送
  • 手动修改dom
  • localstorage操作
  useEffect函数的作用就是为react函数组件提供副作用处理的数据和逻辑,从而修改UI和用户交互等一种方式。
 

2. 基础使用

下面案例说明,函数组件储存了当前state所有状态,函数初次就会触发他们两个的加载,另外当某一个发生改变了 useEffect和函数都会被重新执行加载

import { useEffect, useState } from 'react'
 
function App() {
  const [count, setCount] = useState(0)
 
  useEffect(()=>{
    // 修改了dom数据后 userffect函数被副作用重新执行
    console.log('执行了副作用函数')
  });
    // 函数组件也会被重新执行   
  console.log('函数组件被重新执行了')
  return (
    <button onClick={() => { setCount(count + 1) }}>{count}</button>
  )
}
 
export default App

 

3.useEffect依赖项和控制执行的时机

由于 组件首次渲染执行一次,以及不管是哪个状态更改引起组件更新时都会重新执行
 
添加空数组依赖
import { useEffect, useState } from 'react'
function App() {
  const [count, setCount] = useState(0)
  useEffect(()=>{
    // 修改了dom数据后 userffect函数不会在被触发,只有首次加载函数才会执行一次
    console.log('执行了副作用函数')
  },[]);
    //修改了dom数据后 函数组件会被重新执行   
  console.log('函数组件被重新执行了')
  return (
    <button onClick={() => { setCount(count + 1) }}>{count}</button>
  )
}
export default App

添加特定项作为依赖

副作用函数在首次渲染时执行,在依赖项发生变化时重新执行

给useEffect添加特定的依赖项,当这个依赖性的state发生改变,useEffect与函数组件都会重新渲染被执行,由于第二个参数是依赖项所以是数组可以添加多个依赖项

没有useEffect添加的特定的依赖项,就不会触发useEffect函数,只会触发组件的渲染函数

function App() {  
    const [count, setCount] = useState(0)  
    const [name, setName] = useState('zs') 
    
    useEffect(() => {    
        console.log('副作用执行了')  
    }, [count])  
    console.log('组件被执行了')
    return (    
        <>      
         <button onClick={() => { setCount(count + 1) }}>{count}</button>      
         <button onClick={() => { setName('cp') }}>{name}</button>    
        </>  
    )
}

清理副作用

 
function App() {
    const [count, setCount] = useState(0)
    const [name, setName] = useState('zs')

    useEffect(() => {
        console.log('副作用执行了')
        return () => {
            alert(1)
            console.log('执行了清楚副作用,组件卸载的时候执行')
        }
    }, [count])
    console.log('组件被执行了')
    return (
        <>
            <button onClick={() => { setCount(count + 1) }}>{count}</button>
            <button onClick={() => { setName('cp') }}>{name}</button>
        </>
    )
}

 

另外一般一个 useEffect 只用来处理一个功能,有多个功能时,建议使用多个 useEffect
 

useMemo(性能优化)

解决函数组件的性能问题,比如子组件重复执行问题,每次渲染都进行高开销的计算

// 子组件
function Sub(props) {
    console.log("Sub render");
    let { number, onClick } = props
    return (
        <button onClick={onClick}>{number}</button>
    )
}
// 父组件
function Test() {
    let [value, setValue] = useState('')
    let [number, setNumber] = useState(0)
    const addClick = () => setNumber(number + 1)
    return <>
        <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
        <Sub number={number} onClick={addClick} />
    </>
}

export default Test;

子组件依赖的只有number ,理想情况下只希望number变化时触发子组件重新渲染

但实际是在输入框内的值发生变化,子组件也会重新渲染 如果子组件的逻辑较复杂,就是无意义的大量计算,浪费资源

// 子组件
function Sub(props) {
    console.log("Sub render");
    let { number, onClick } = props
    return (
        <button onClick={onClick}>{number}</button>
    )
}
// 父组件
function Test() {
    let [value, setValue] = useState('')
    let [number, setNumber] = useState(0)
    const addClick = () => setNumber(number + 1);
    // 使用useMemo记住计算后的值,只有当依赖number变量发生变化,才会重新计算子组件内容
    const MemoSub = useMemo(
        () => <Sub data={number} onClick={addClick} />,
        [number] // 只有 number 变化才重新计算 MenoSub
      )
    return <>
        <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
        {MemoSub}
    </>
}

export default Test;

 

useCallback(性能优化)

接收两个参数:回调函数和依赖项数组。回调函数是需要缓存的函数,依赖项数组用于确定何时需要重新创建函数实例。

当依赖项数组中的任何一个值发生变化时,useCallback 将返回一个新的函数实例,否则它将返回之前缓存的函数实例

import { useState, useCallback } from 'react';

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

  // 使用 useCallback 缓存 handleClick 函数
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      {/* 在按钮上使用缓存的 handleClick 函数 */}
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

在这个例子中,我们使用 useCallback 来缓存回调函数 handleClick, 将其缓存以避免在每次重新渲染组件时创建新的函数实例。

同时,在按钮上使用了缓存的 handleClick 函数,以确保点击按钮时调用的是缓存的函数实例。我们还将 count 添加到依赖项数组中,以确保每当 count 发生变化时,handleClick 都会被重新创建。

useCallback 和 useMomeo 的区别

1.useCallback 和 useMemo 都是用于性能优化的 React 钩子函数,它们都可以避免不必要的重新计算或重新渲染。虽然它们看起来很相似,但它们有几个重要的区别。

2.首先,useCallback 返回一个缓存的回调函数,而 useMemo 返回一个缓存的值。这意味着 useCallback 的主要作用是为一个函数创建缓存,而 useMemo 的主要作用是缓存一个值

3.最后,它们的使用场景也不同。useCallback 适用于优化回调函数,避免不必要的重新渲染,并传递给子组件。而 useMemo 适用于优化计算开销较大的值,如大型数组或对象的计算

 

useRef

useRef 可以缓存所有数据类型,更新的数据不会随着组件的重新渲染而重置,会一直保持最新状态的内容,

但是保存的数据类型 无法在ui渲染页面上使用,只能作为一个状态进行储存

也可以绑定给一个元素标签获取dom进行操作

function Test() {
    /* 保存 DOM */
    const inputEl = useRef()
    const onClick = () => {
        console.log(inputEl); // 对象类型,只有一个 current 属性指向指定DOM
        inputEl.current.innerHTML = '2asdasd sd阿萨德'
    }

    return <div>
        <div ref={inputEl}></div>
        <button onClick={onClick}>click me!!!</button>
        <br />
    </div>
}

 

useContext

usecontext React 16.3本中新引入的一个特性,它可以让组件之间共享数据十分方便。它属于 React Context API(上下文API),可以让组件层级之间自由传递数据,而使用Context API可以极大地提高组件之间的可复用性。
使用 useContext以使组件树中的任何组件访问到 cntext值,无论它是何种层级的,而且更方便的是,不需要利用props行传递,而只需要一行代码即可

下面案例是同一组件下多个 子组件的上下文通讯

import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('light')
// 父组件
function Test() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar theme="dark" />
    </ThemeContext.Provider>
  )
}
// 子组件
function Toolbar(props) {
  return (
    // 中间的组件再也不必指明往下传递 theme 了。
    <div>
      <Button />
    </div>
  )
}
// 子组件中的子组件
function Button() {
  // 指定 contextType 读取当前的 themecontext。
  // React 会往上找到最近的 theme Provider,然后使用它的值。
  // 在这个例子中,当前的 theme 值为 “dark”。
  const theme = useContext(ThemeContext)
  return <button>{ theme }</button>
}

 

垮文件使用usecontext 进行通讯

 父组件

import React, { useState, createContext } from 'react'
import Counter from './Counter'
 
export const countContext = createContext()
 
export default function Example4() {
    const [count, setCount] = useState(0)
    return (
        <div>
            <p>你点击了{count}次</p>
            <button onClick={()=>{setCount(count+1)}}>点击</button>
            <countContext.Provider value={count}>
                <Counter />
            </countContext.Provider>
        </div>
    )
}

子组件

import React, { useContext } from 'react'
import { countContext } from './Example4'
 
function Counter() {
    let count = useContext(countContext)
    return (
        <div>
            <h2>{count}</h2>
        </div>
    )
}
 
export default Counter

 

 这样在多级组件使用就减少使用redux,useContext确实好用,起码跨级传递数据不用那么麻烦了

 

 完结,有不足欢迎补充。文章来源地址https://www.toymoban.com/news/detail-709957.html

 
 

到了这里,关于React hooks 大全详情的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React Hooks 源码解析:useEffect

    React Hooks 源码解析(4):useEffect React 源码版本: v16.11.0 源码注释笔记:airingursb/react 1.1 为什么要有 useEffect 我们在前文中说到 React Hooks 使得 Functional Component 拥有 Class Component 的特性,其主要动机包括: 在组件之间复用状态逻辑很难 复杂组件变得难以理解 难以理解的 class 对

    2024年01月21日
    浏览(41)
  • React Hook - useState函数的详细解析

    在上一篇文章中, 我用到useState来让大家体验一下hooks函数 那么接下来我们来先研究一下上面核心的一段代码代表什么意思 useState来自react,需要从react中导入,是一个hook函数, 官方中也将它成为State Hook, 它与class组件里面的 this.state 提供的功能完全相同; 一般来说,在函数退出

    2024年01月25日
    浏览(40)
  • React Hooks的useState、useRef使用

    React Hooks 是 React 16.8 版本引入的新特性,它允许你在不编写 class 的情况下使用 state 和其他 React 特性。其中, useState  和  useRef  是两个常用的 Hooks。 1. useState useState  是一个允许你在函数组件中添加 state 的 Hook。 使用说明: useState  返回一个状态变量和一个设置该变量的函

    2024年02月02日
    浏览(40)
  • React hooks之useEffect、useMemo优化技巧

    useEffect使用JSON.stringfy进行过滤,避免重复执行 将数组直接放入依赖数组可能不会按预期工作,因为数组比较是基于引用而不是内容。也就是说,如果数组引用没有变,即使数组内容发生了变化,副作用也不会重新运行。或者数组内饿哦那个没有改变但是引用却发生变化时,

    2024年02月12日
    浏览(46)
  • 前端react入门day04-useEffect与Hook函数

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 useEffect 的使用 useEffect 的概念理解 useEffect 依赖项参数说明 useEffect — 清除副作用 自定义Hook实现 React Hooks使用规则 useEffect是一个React Hook函数,用于在React组件中 创建不

    2024年01月22日
    浏览(53)
  • React hooks文档笔记(五)useEffect——解决异步操作竞争问题

    非bug,重新安装组件仅在开发过程中发生,帮助找到需要清理的效果。在生产环境中只会加载一次。 React 将在 Effect 下次运行之前以及卸载期间调用您的清理函数。 return () = {}; 在开发中, Effect call addEventListener() ,然后立即call removeEventListener() ,然后再次cal laddEventListener()

    2024年02月11日
    浏览(44)
  • React hooks API详情

    hook 是react 16.8的新增特性 ,他可以让你不在编写class的情况下shiystate以及react的特性 Hooks的出现,首先解决了以下问题: 告别了令人疑惑的生命周期 告别类组件中烦人的this 告别繁重的类组件,回归到了熟悉的函数组件 react 整个思想上面的转变,从“面向对象”的思想转为“

    2024年02月08日
    浏览(34)
  • 解决useState 异步回调useGetState自定义hooks获取不到最新值

    1、直接传入新值 setState(options); 2、传入回调函数 setState(callBack); 通常情况下 setState 直接使用上述第一种方式传参即可,但在一些特殊情况下第一种方式会出现异常; 例如希望在异步回调或闭包中获取最新状态并设置状态,此时第一种方式获取的状态不是实时的,React 官方文

    2024年02月06日
    浏览(43)
  • react之useState详解

    它是React 16.8 的新特性,我们在React里面一般都是用Class去写组件,但是有时候会发现不用它更方便,但是问题来了: 不用Class的时候,数据的状态改变如何存储呢? 如果你用 var,let,const 等等,你会发现:值虽然改变了,但是页面并没有重新渲染,也就是说, 这些定

    2024年04月25日
    浏览(34)
  • react 之 useState

    参考:https://blog.csdn.net/Ljwen_/article/details/125319191 一、基本使用 useState是 react 提供的一个定义响应式变量的 hook 函数,基本语法如下: 它返回一个状态和一个修改状态的方法,状态需要通过这个方法来进行修改; initialCount 是我们传入的一个初始状态,它是惰性的,我们可以

    2023年04月23日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包