qq_45677671的博客

文章目录基本用法基本用法封装的文件：useHash.tsimport { useState, useCallback, useEffect } from 'react';/** * 获取和更新 URL hash 值 */export const useHash = () => { const [hash, setHash] = useState(() => window.location.hash); const onHashChange = useCallback

文章目录useReducer Hook 介绍useReducer Hook 实例useReducer Hook 介绍const [state, dispatch] = React.useReducer(reducer, initialArg, init);useReducer是useState的替代方案接收：如(state, action)=>newState的 reducer返回：当前 state 和 dispatch 方法useReducer使用场景：state 逻辑复杂且

useEffect 不会 block 浏览器渲染，而 useLayoutEffect 会。useEffect 会在浏览器渲染结束后执行，useLayoutEffect 则是在 DOM 更新完成后，浏览器绘制之前执行。

文章目录useContext Hook 介绍useContext Hook 实例useContext Hook 介绍一种组件间通信方式，常用于【祖宗组件】与【后代组件】之间的通信useContext Hook 实例

在function组件中，每当DOM完成一次渲染，都会有对应的副作用执行，useEffect用于提供自定义的执行内容，它的第一个参数（作为函数传入）就是自定义的执行内容。为了避免反复执行，传入第二个参数（由监听值组成的数组）作为比较(浅比较)变化的依赖，比较之后值都保持不变时，副作用逻辑就不再执行。

文章目录useState Hook 介绍useState Hook 实例useState Hook 介绍useState Hook 让函数组件也可以有 state 状态，并进行读写操作语法：const [state, setState] = React.useState(initalState)// x代表可以自定义，X代表首字母大写const [xxx, setXxx] = React.useState(initalValue)useState()说明：参数：第一次初始化指定的值

React 中 useImperativeHandle 的使用方法及案例

自定义一个计数器的 hookcount.js 文件import React, { useState } from 'react';//参数 ：initNum 加或减的个数 初始值function useCount(initNum) { const [count, setCount] = useState(initNum); //加一的函数 const addCount = () => { setCount(count + 1); } .

文章目录useMemo 介绍useMemo 实例useMemo 介绍const memoizedValue = React.useMemo( ()=>computeExpensiveValue(a,b), [a,b]);返回一个 memoized 值把创建函数和依赖项数组作为参数传入useMemo只有在依赖项改变时会重新计算 memoized 值这种优化有助于避免在每次渲染时进行高开销的计算传入useMemo的函数会在渲染期间执行。与渲染无关的操作不要写在里面如果没有提供依

在函数式组件中，useRef 是一个返回可变引用对象的函数。该对象.current属性的初始值为useRef传入的参数initialVale。

闭包，是React Hooks的核心。不理解闭包，React Hooks的使用就无法达到炉火纯青的地步。如果只是基于表面的去使用，看官方文档就可以了。