React18 hook学习笔记

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

useState

useState用于在函数组件中声明和管理状态
它接受初始状态,并返回一个状态变量和一个更新状态的函数
通过调用更新状态的函数,可以改变状态的值并触发组件的重新渲染

import { useState } from "react"

function App() {
  const [obj, setObj] = useState({
    a: 1,
    b: 2
  })

  const [arr, setArr] = useState([])

  const updateObjValue = () => {
    // 更新引用值的状态,必须传递一个新的引用
    setObj(prev => {
      return {
        ...obj,
        b: 3
      }
    })
    setArr(prev => [...arr, 1])
  }
 
  return (
    <div onClick={updateObjValue}>
      a: {obj.a}
      b: {obj.b}
      数组:{arr}
    </div>
  )
}

export default App;

useEffect

React的useEffect钩子可以让开发者在函数组件中管理副作用。
副作用操作是指那些与组件渲染无关的操作,例如访问网络、获取浏览器窗口大小、访问本地存储等。这些操作一般会产生一些副作用,例如更新组件状态、改变浏览器地址等。
使用useEffect可以在组件渲染后执行副作用操作,并且可以根据需要设置条件,只在满足条件时执行副作用操作,从而避免不必要的计算和网络请求。

useEffect接收两个参数:第一个参数是一个回调函数,该函数会在组件渲染之后执行,用于执行副作用操作。
如果需要在组件卸载时执行一些清理操作,可以在该函数中返回一个清理函数,React会在组件卸载时调用该函数(如清除定时器等)。
第二个参数是一个可选数组,用于指定当依赖项发生变化时是否需要重新执行effect函数。
如果第二个参数为空数组,则表示effect只会在组件挂载和卸载时执行一次;如果第二个参数不为空数组,每当指定的依赖项发生变化时,effect函数都会重新执行。

// 监听count的变化,重新渲染
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

请求网络

import { useState, useEffect } from 'react';

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data && <h1>{data.title}</h1>}
    </div>
  );
}

通过useEffect来获取数据

import {useEffect, useState} from "react";

const UseEffectDemo = () => {
    const [list, setList] = useState([])
    const [id, setId] = useState('5433d5e4e737cbe96dcef312')
    const [num, setNum] = useState(0)
    const [info, setInfo] = useState([])

    useEffect(()=>{
        const requestList = async () => {
            try {
                const response = await fetch('https://cnodejs.org/api/v1/topics')
                const res = await response.json()
                console.log(res['data'])
                setList(res['data'])
            } catch (err) {
                if (err) throw Error
            }
        }
        requestList().then((rs)=>{
            console.log('requestList')
        })
    },[])

    useEffect(()=>{
        const requestInfo = async () => {
            try {
                const response = await fetch('https://cnodejs.org/api/v1/topic/' + id)
                const res = await response.json()
                setInfo(res['data'])
            } catch (err) {
                if (err) throw Error
            }
        }
        requestInfo().then((rs)=>{
            console.log('requestInfo')
        })
    },[id])

    return (
        <>
            <h2 id='title'>UseEffect Demo</h2>
            <h4>{id}</h4>
            <div style={{display:'flex'}}>
                <ul>
                    {
                        list.map((item, index)=>{
                            return (
                                <li
                                    key={item.id}
                                    style={{background:index === num ? 'skyblue':'white', cursor:"pointer"}}
                                    onClick={()=>{
                                        setId(item.id)
                                        setNum(index)
                                    }}
                                >{item.id}</li>
                            )
                        })
                    }
                </ul>
                <div dangerouslySetInnerHTML={{__html: info.content}}>

                </div>
            </div>
        </>
    )
}
export default UseEffectDemo

useEffect是异步执行的,useLayoutEffect是同步执行的。
useLayoutEffect是当浏览器把内容渲染到页面之前执行,而useEffect是当浏览器把内容渲染到页面之后执行。尽可能使用标准的useEffect以避免阻塞页面更新。

useEffect的运行规则:组件首次渲染工作完成并将真实dom生成到页面以后,将对应的回调函数推入异步队列等待执行
useLayoutEffect的运行规则:组件首次渲染工作完成并将真实dom生成到页面以后,将对应的回调函数推入同步队列等待执行

正常情况全部使用useEffect,只有逼不得已的情况才考虑是否使用useLayoutEffect

import { useState, useEffect } from "react";

export default function TopicList() {
    const [topicList, setTopicList] = useState([])

    useEffect(() => {
        const requestList = async () => {
            try {
                const response = await fetch('https://cnodejs.org/api/v1/topics')
                const res = await response.json()
                console.log(res['data'])
                setTopicList(res['data'])
            } catch (err) {
                if (err) throw Error
            }
        }
        requestList().then((rs)=>{
            console.log('requestList')
        })
        
        const topicListDom = document.getElementsByClassName("topic-list-wrapper")[0]
        console.log('topicListDom', topicListDom)
    }, [])

    return (
        <div className="topic-list-wrapper">
            {
                topicList.map(topic => (
                    <div key={topic.id}>{topic.title}</div>
                    )
                )
            }
        </div>
    )
}

清除定时器

import { useState, useEffect } from "react";

export default function Tick() {
    const [tickTime, setTickTime] = useState(100)

    useEffect(() => {
        let timer = setInterval(() => {
            console.log("tickTime working")
            setTickTime(prev => prev - 1)
        }, 1000);

        return () => {
            clearInterval(timer)
            timer = null
        }
    }, [])

    return (
        <div>倒计时: {tickTime}</div>
    )
}

useReducer

useReducer是另一种让函数组件保存状态的方式
它接受一个 reducer 函数和一个初始状态,并返回当前状态和 dispatch 函数

import { useReducer } from "react";

export default function ReducerDemo() {
    const reducer = (state, action) => {
        switch (action.type) {
            case 'increment':
                return state + 1
            case 'decrement':
                return state + 1    
        }
        return state;
    }

    const [count, dispatch] = useReducer(reducer, 0)
    return (
        <div>
            <span>{count}</span>
            <button onClick={() => dispatch({ type: 'increment' })}>plus</button>
        </div>
    )
}

useCallBack

每次组件的重新渲染都意味着内部所有的引用值都会被重新构建
useCallBack用来长期稳定的维护某一个函数的引用,它会将函数创建后的引用保存,当函数组件下一次重新渲染时,它会直接返回之前保存的引用,而不是重新创建引用
useCallBack只在创建函数引用的时候使用

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

const Child = memo(({value,change}) => {
    console.log('----re-render----')
    return (
        <input type="text" value={value} onChange={change}/>
    )
})

const UseCallback = () => {
    const [v1, setV1] = useState('')
    const [v2, setV2] = useState('')

    const onChange1 = useCallback((e)=>{
        setV1(e.target.value)
    }, [])

    const onChange2 = useCallback((e)=>{
        setV2(e.target.value)
    }, [])
    return (
        <>
            <h2>UseCallback</h2>
            <Child value={v1} change={onChange1}/>
            <Child value={v2} change={onChange2}/>
        </>
    )
}
export default UseCallback

useMemo

useMemo类似于计算属性
useCallBack就是useMemo实现的,用来做缓存的
useCallBack第一个参数也是一个函数,并不会在声明时被React直接执行;该函数会在组件渲染过程中被 useMemo 钩子调用,将计算结果进行缓存
第二个参数是依赖项,当依赖项变化时,React会重新执行对应的第一个参数,然后拿到最新的返回值,再次进行缓存
业内都是使用useCallBack去缓存函数

memo方法:
性能优化,如果本组件中的数据没有发生变化,阻止组件更新

import { memo } from "react";

function MemoDemo() {
    console.log('memo rendering...')
    return (
        <div>memo data</div>
    )
}

export default memo(MemoDemo)

自定义hooks

使用自定义 hook 时,需要遵循以下规则:

  1. 自定义 hook 必须是一个函数,名称必须以“use”为前缀。
  2. 自定义 hook 可以调用其他钩子或普通函数。
  3. 自定义 hook 应该使用 useState、useEffect 等 React 钩子创建状态和处理副作用。
  4. 可以将自定义钩子与 useContext 和 useReducer 配合使用来实现更复杂的行为。

下面是一个示例自定义 hook,用于检查用户是否拥有特定的权限:

import { useState, useEffect } from 'react';

function useUserPermissions(permission) {
  const [hasPermission, setHasPermission] = useState(false);

  useEffect(() => {
    // 模拟 Ajax 请求,获取用户权限
    const userPermissions = ['admin', 'editor'];

    if (userPermissions.includes(permission)) {
      setHasPermission(true);
    } else {
      setHasPermission(false);
    }
  }, [permission]);

  return hasPermission;
}

在其他组件中使用 hook 检查用户是否拥有访问特定页面或功能的权限

import React from 'react';
import useUserPermissions from './useUserPermissions';

function Dashboard() {
  const hasAccess = useUserPermissions('admin');

  return (
    <div>
      {hasAccess ? (
        <h1>Welcome to the Admin Dashboard!</h1>
      ) : (
        <h1>Sorry, you do not have access to this page.</h1>
      )}
    </div>
  );
}

显示loading效果
新建文件useRequestLoadingDispatcher.js

import { useState } from "react";

export default function useRequestLoadingDispatcher() {
    const [loading, setLoading] = useState(false)

    const executeRequest =async (promiseFn) => {
        setLoading(true)
        console.log('loading data........................')
        await promiseFn()
        setLoading(false)
        console.log('init finish')
    }

    return {loading, executeRequest}
}

使用useRequestLoadingDispatcher

import { useState, useEffect } from "react";
import TopicItem from "../TopicItem";
import useRequestLoadingDispatcher from "../hooks/useRequestLoadingDispatcher";

export default function TopicList() {
    const [topicList, setTopicList] = useState([])
    const {loading, executeRequest} = useRequestLoadingDispatcher()

    const fetchFromServer = async () => {
        // 延时模拟加载中
        const delay = async (duration = 2000) => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve()
                }, duration)
            })
        }
        executeRequest(async () => {
            try {
                const response = await fetch('https://cnodejs.org/api/v1/topics')
                const res = await response.json()
                console.log(res['data'])
                await delay(2000)
                setTopicList(res['data'])
            } catch (err) {
                if (err) throw Error
            }
        })
    } 

    useEffect(() => {
        fetchFromServer()
    }, [])

    return (
        <div className="topic-list-wrapper">
            { loading ? <div>数据加载中</div> : (
                    topicList.map(topic => (
                        <TopicItem {...topic}></TopicItem>
                        )
                    )
                )
            }
        </div>
    )
}

强制刷新useForceUpdate

import { useState } from "react";

export default function useForceUpdate() {
    const [_, setForceObj] = useState({})
    const forceUpdate = () => {
        setForceObj({})
    }

    return forceUpdate;
}

使用强制刷新

import useForceUpdate from "../hooks/useForceUpdate"
export default function ForceUpdateTest() {
    console.log('do force update')
    const forceUpdate = useForceUpdate()

    return (
        <button onClick={forceUpdate}>force update</button>
    )
}

useRef

构建一个状态出来,但是这个状态是直接脱离React控制的,也不会造成页面的重新渲染,同时状态还不会因为组件的重新渲染而被初始化

import { useState, useCallback, useRef } from "react";
export default function Ticker() {
    const [timeCount, setTimeCount] = useState(60)
    const timerIdRef = useRef(null)

    // useRef会返回一个对象,里面有一个current属性
    // ref是可读可写的
    console.log("timerIdRef", timerIdRef)

    const startTick = useCallback(() => {
        timerIdRef.current = setInterval(()=>{
            setTimeCount(prev => prev - 1)
        }, 1000)
    })

    const stopTick = useCallback(() => {
        if (timerIdRef.current) clearInterval(timerIdRef.current)
    })

    return (
        <>
            <button onClick={startTick}>start</button>
            <button onClick={stopTick}>stop</button>
            <span>{timeCount}</span>
        </>
    )
}

使用useRef获取DOM元素

import { useCallback, useEffect, useRef } from "react"

export default function TestInput() {
    const inputElementRef = useRef(null)

    useEffect(() => {
        inputElementRef.current = document.getElementsByClassName('input-example')[0]
    }, [])

    const handleClick = useCallback(() => {
        inputElementRef.current.focus()
    })

    return (
        <div>
            <input className="input-example"></input>
            <button onClick={handleClick}>click me</button>
        </div>
    )
}

useRef可以直接作用在dom上,它使用useEffect去获取真实dom并且赋值

import { useCallback, useRef } from "react"

export default function TestInput() {
    const inputElementRef = useRef(null)

    const handleClick = useCallback(() => {
        inputElementRef.current.focus()
    })

    return (
        <div>
            <input ref={inputElementRef} className="input-example"></input>
            <button onClick={handleClick}>click me</button>
        </div>
    )
}

fowardRef

fowardRef是一个高阶组件
高阶组件:接收一个组件作为参数,返回一个新的组件
fowardRef给函数组件扩展了一个ref属性

TestInput.jsx

import { forwardRef } from "react"

// 给组件挂载ref属性,必须使用forwardRef
function TestInput(props, parentRef) {

    return (
        <div>
            <input ref={parentRef} className="input-example"></input>
        </div>
    )
}

export default forwardRef(TestInput)

App.js
forwardRef一般都是和组件ref连用的,不会单独使用

import { useCallback, useRef } from "react";
import TestInput from "./components/TestInput";

function App() {

  const testInputRef = useRef(null)

  const handleClick = useCallback(() => {
    testInputRef.current.focus()
  })

  return (
    <div>
      <TestInput ref={testInputRef}/>
      <button onClick={handleClick}>click me</button>
    </div>
  )
}

export default App;


useImperativeHandle

用于向父组件暴露子组件实例的特定函数。它通常与forwardRef一起使用,在子组件中定义外部可以调用的实例方法。

  1. 在子组件中使用forwardRef,将ref作为第二个参数传递给子组件;第三个参数是依赖项
const ChildComponent = forwardRef((props, ref) => {
  // 定义需要暴露给父组件的方法
  useImperativeHandle(ref, () => ({
    // 这里定义需要暴露给父组件的方法
    focus: () => {
      // 在这里编写具体的逻辑
      // 注意:这里的 focus 是一个示例,你可以定义任何你需要的方法
      // 你可以在该方法内部执行子组件的某个操作
      // 这个方法会被父组件调用
    },
    // 定义其他的方法...
  }));

  // 渲染子组件的 JSX
  return <div>子组件</div>;
});

export default ChildComponent;
  1. 在父组件中创建一个ref对象,并将其传递给子组件:
import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  // 创建 ref 对象
  const childRef = useRef();

  // 在父组件中可以通过调用子组件的方法来访问子组件的实例
  const handleClick = () => {
    childRef.current.focus(); // 调用子组件的 focus 方法
  };

  return (
    <div>
      <button onClick={handleClick}>调用子组件方法</button>
      <ChildComponent ref={childRef} />
    </div>
  );
};

export default ParentComponent;

useContext

允许组件之间通过除了props以外的情况去共享数据
如果组件属性传递超过了4层,可以考虑使用上下文
上下文大多数是用来做全局数据管理的文章来源地址https://www.toymoban.com/news/detail-634905.html

  1. 创建上下文:context/themeContext.js
import { createContext } from "react";

const ThemeContext = createContext("light")

export default ThemeContext
  1. 给自定义上下文设置值
import { useCallback, useState } from "react";
import ThemeContext from "./context/themeContext";
import TestInput from "./components/TestInput";

function App() {
  const [theme, setTheme] = useState("light")

  const changeTheme = useCallback(() => {
    setTheme(prev => {
      if (prev === 'light') return "dark"
      return "light"
    })
  })
  return (
    <div className="wrapper">
      <ThemeContext.Provider value = {theme}>
        <TestInput />
        <button onClick={changeTheme}>change theme</button>
      </ThemeContext.Provider>
    </div>
  )
}

export default App;
  1. 在组件中获取上下文中的值
import { useContext } from "react"
import ThemeContext from "../../context/themeContext"

export default function TestInput(props) {

    const contextValue = useContext(ThemeContext)
    return (
        <div style={{background: contextValue === 'light' ? "#fff" : "#666"}}>
            <input></input>
        </div>
    )
}

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

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

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

相关文章

  • React学习8 hooks

    1、setState setState更新数据是异步的,如果想获取更新完的数据,需要通过第二个参数回调函数来获取 2、lazyLoad,用的时候再调用,不会预先调用,需要用suspence包裹注册路由 3、stateHook userState 函数组件中使用state,通过调用React.useState()使用,该数组两个变量,第一个存储状态

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

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

    2024年02月11日
    浏览(44)
  • 前端开发笔记 | React Hooks子组件和父组件交互

    前端开发框架目前比较常用的就是react、vue等,其中使用React Hooks 带来了不少的好处,今天来聊聊React Hooks开发方式下,子组件和父组件的交互。 子组件定义 父组件调用子组件 父组件定义 子组件中刷新父组件按钮文案 实际效果:点击子组件中“改变父组件按钮”,父组件中

    2024年02月11日
    浏览(81)
  • 【react】react18的学习(十一)– 底层原理(一)之 diff 算法

    diff算法、fiber链表 步骤:(追求多复用,快渲染) 首次渲染,缓存虚拟dom或fiber链表(17及以后); 组件更新,将新生成的虚拟dom与已有的真实dom的fiber链表对比; 遵循同级对比、深度对比原则,先依次找节点对比; 对比过程中,第一轮对比:按链表顺序对比,节点key值相

    2024年02月17日
    浏览(38)
  • 【react】react18的学习(十二)– 底层原理(二)之 迭代器 iterator

    迭代器iterator 是一种 ES6 规范,具有这种机制的数据结构才可以使用 for of 循环:返回每一项的值; 原型链具有 Symbol.iterator 属性的数据结构都具备;如数组、部分类数组、字符串等; 普通对象就不能用; for-of循环原理:循环获取属性值; 执行可迭代原型链上的 Symbol.iterat

    2024年02月16日
    浏览(52)
  • React Hooks ——性能优化Hooks

    Hooks从语法上来说是一些函数。这些函数可以用于在函数组件中引入状态管理和生命周期方法。 简洁 从语法上来说,写的代码少了 上手非常简单 基于函数式编程理念,只需要掌握一些JavaScript基础知识 与生命周期相关的知识不用学,react Hooks使用全新的理念来管理组件的运作

    2024年02月06日
    浏览(41)
  • 【React】React Hooks解析

    React 16.8 + 为什么需要Hook? Hook是 React 16.8 的新增特性,它可以让我们在不编写class的情况下使用state以及其他的React特性(比如生命周期) 我们先来思考一下class组件相对于函数式组件有什么优势?比较常见的是下面的优势: class组件可以 定义自己的state ,用来 保存组件自己内

    2024年02月11日
    浏览(53)
  • React的hooks---自定义hooks

    通过自定义 Hook,可以将组件逻辑提取到可重用的函数中,在 Hook 特性之前,React 中有两种流行的方式来共享组件之间的状态逻辑: render props 和 高阶组件 ,但此类解决方案会导致组件树的层级冗余等问题。而自定义 Hook 的使用可以很好的解决此类问题 自定义 Hook 是一个函数

    2024年02月15日
    浏览(30)
  • React hook 10种常见 Hook

    React官网是这么介绍的: Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 完全可选的 你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想,你不必现在就去学习或使用 Hook。 100% 向后兼容的 Hook 不包含任何

    2024年02月10日
    浏览(36)
  • 【《React Hooks实战》——指导你使用hook开发性能优秀可复用性高的React组件】

    使用React Hooks后,你很快就会发现,代码变得更具有组织性且更易于维护。React Hooks是旨在为用户提供跨组件的重用功能和共享功能的JavaScript函数。利用React Hooks, 可以将组件分成多个函数、管理状态和副作用,并且不必声明类即可调用React内置的功能。而且,上述所有的操作

    2024年02月14日
    浏览(34)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包