React中的hook使用

最新推荐文章于 2024-10-18 11:12:30 发布
最新推荐文章于 2024-10-18 11:12:30 发布
阅读量593 收藏 5
点赞数 16
分类专栏： react 文章标签： javascript react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56947432/article/details/140513433
版权

React18之前的HOOK

useContext

作用: 在接收context传递数据的组件中,使用useContext快速拿到数据

-- context.js
import React from 'react'
export default React.createContext()
​
​
-- App.js
export default class App extends Component {
  render() {
    return (
      <testContext.Provider value={{ name: 'zs' }}>
        <Test></Test>
      </testContext.Provider>
    )
  }
}
​
-- Test.js
import React, { useContext } from 'react'
import testContext from './context'
export default function Test() {
  const context = useContext(testContext)
  console.log(context)
  return <div></div>
}
​
​

useReducer

组件中有大量数据,使用useState,略显繁琐,使用useReducer更方便的管理数据

import React, { useReducer } from 'react'
​
const initialState = { count: 0, msg: '哈哈' }
​
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {
        ...state,
        count: state.count + 1,
      }
    case 'decrement':
      return {
        ...state,
        count: state.count - 1,
      }
    default:
      throw new Error()
  }
}
export default function Test1() {
  const [state, dispatch] = useReducer(reducer, initialState)
  return (
    <>
      Count: {state.count}
      msg: {state.msg}
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </>
  )
}
​
// useReduder的第三个参数:
​
function init(initialCount) {
  return {count: initialCount};
}
​
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':
      return init(action.payload);
    default:
      throw new Error();
  }
}
​
function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({type: 'reset', payload: initialCount})}>
        Reset
      </button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}
​
​

useCallBack

每次函数组件更新,函数组件内的函数会重新创建.使用useCallBack可以缓存函数

import React, { useState, useCallback } from 'react'
export default function Test() {
  console.log('test渲染了')
  const [count, setCount] = useState(0)
  // 如果是空数组则回调函数只创建一次.如果不写第二个参数,或第二个参数监听数据,回调函数则创建多次
  const handle = useCallback(() => {
    console.log(count)
    setCount(count + 1)
  }, [count])
  return (
    <div>
      <div>{count}</div>
      <button onClick={handle}>按钮</button>
    </div>
  )
}
​
​

React.memo

作用类似于类组件的PureComponent, 当父组件更新时,动态判断子组件使用更新

--App.js  
​
import React, { useState, useEffect } from 'react'
import Test from './Test'
function getRandomIntInclusive(min, max) {
  min = Math.ceil(min)
  max = Math.floor(max)
  return Math.floor(Math.random() * (max - min + 1)) + min //含最大值，含最小值
}
class App extends React.Component {
  state = {
    count: 0,
  }
  render() {
    console.log('app渲染了')
    return (
      <div>
        <button
          onClick={() => {
            this.setState({
              count: getRandomIntInclusive(1, 2),
            })
          }}
        >
          按钮
        </button>
        <Test count={this.state.count}></Test>
      </div>
    )
  }
}
​
export default App
​
​
-- Test.js 
import React from 'react'
​
function Test(props) {
  console.log('Test组件渲染了-' + props.count)
  return <div>{props.count}</div>
}
export default React.memo(Test)

useMemo

会缓存一个计算的结果,如果没有变化,则不会重新执行计算

// 使用前
import React,{useState} from 'react';
 
export default function WithoutMemo() {
    const [count, setCount] = useState(1);
    const [val, setValue] = useState('');
 
    function expensive() {
        console.log('compute');
        let sum = 0;
        for (let i = 0; i < count * 100; i++) {
            sum += i;
        }
        return sum;
    }
 
    return <div>
        <h4>{count}-{val}-{expensive()}</h4>
        <div>
            <button onClick={() => setCount(count + 1)}>+c1</button>
            <input value={val} onChange={event => setValue(event.target.value)}/>
        </div>
    </div>;
}
​
// 使用后
export default function WithMemo() {
    const [count, setCount] = useState(1);
    const [val, setValue] = useState('');
    const expensive = useMemo(() => {
        console.log('compute');
        let sum = 0;
        for (let i = 0; i < count * 100; i++) {
            sum += i;
        }
        return sum;
    }, [count]);
 
    return <div>
        <h4>{count}-{expensive}</h4>
        {val}
        <div>
            <button onClick={() => setCount(count + 1)}>+c1</button>
            <input value={val} onChange={event => setValue(event.target.value)}/>
        </div>
    </div>;
}

useRef

新的创建ref对象的方式

function TextInputWithFocusButton() {
  const inputEl = useRef(); // 传入的null表示inputEl.current的初始值
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

useImperativeHandle

useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值. useImperativeHandle 应当与 [forwardRef]一起使用

作用: 封装公共组件的时候,可以给使用公共组件的组件提供指定的API. 有条件的操作公共组件的真实dom

--App.js
import React, { useState, useEffect } from 'react'
import FancyInput from './FancyInput'
​
const inputRef = React.createRef()
class App extends React.Component {
  render() {
    return (
      <div>
        <button
          onClick={() => {
            
            console.log(inputRef.current.focus())
          }}
        >
          按钮
        </button>
        <FancyInput ref={inputRef}></FancyInput>
      </div>
    )
  }
}
​
export default App
​
​
--FancyInput.js
import React, { useRef, useImperativeHandle, forwardRef } from 'react'
function FancyInput(props, ref) {
  const inputRef = useRef()
  useImperativeHandle(ref, () => ({
    focus: () => {
        
      inputRef.current.focus()
    },
  }))
  return <input ref={inputRef} />
}
FancyInput = forwardRef(FancyInput)
export default FancyInput
​
​

useLayoutEffect

作用与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。

useEffect
这个是在render结束后,你的callback函数执行,但是不会阻塞浏览器渲染
​
useLayoutEffect
这个是用在处理DOM的时候,当你的useEffect里面的操作需要处理DOM,并且会改变页面的样式,就需要用这个,否则可能会出现出现闪屏问题, useLayoutEffect里面的callback函数会在DOM更新完成后立即执行,但是会在浏览器进行任何绘制之前运行完成,阻塞了浏览器的绘制
​
import React, { useEffect, useLayoutEffect, useRef } from 'react'
import TweenMax from 'gsap' // npm i gsap@3.7.0
import './index.css'
​
const Animate = () => {
  const REl = useRef(null)
  useLayoutEffect(() => {
    /*下面这段代码的意思是当组件加载完成后,在0秒的时间内,将方块的横坐标位置移到600px的位置*/
    TweenMax.to(REl.current, 0, { x: 600 })
  }, [])
  return (
    <div className="animate">
      <div ref={REl} className="square">
        square
      </div>
    </div>
  )
}
​
export default Animate

useDebugValue

useDebugValue 可用于在 React 开发者工具中显示 自定义 hook 的标签

注意:只能在自定义hook中使用

import { useState, useDebugValue } from 'react'
function getRandomIntInclusive(min, max) {
  min = Math.ceil(min)
  max = Math.floor(max)
  return Math.floor(Math.random() * (max - min + 1)) + min //含最大值，含最小值
}

export default function useFriendStatus() {
  const [isOnline, setIsOnline] = useState(null)

  setTimeout(() => {
    let result = getRandomIntInclusive(0, 1)
    console.log(result)
    setIsOnline(result ? 'online' : 'offline')
  }, 1000)

  // 在react开发者工具中的这个 Hook 旁边显示标签
  // "FriendStatus: Online"
  useDebugValue(isOnline)

  return isOnline
}

React18新增的HOOK

useId

用于生成唯一值

import React, { useId } from 'react'
export default function Checkbox() {
  const id = useId()
  return (
    <>
      <label htmlFor={id}>Do you like React?</label>
      <input id={id} type="checkbox" name="react" />
    </>
  )
}

useTransition

useTransition可以将一些状态更新标记为不紧急。默认情况下，所有状态更新都是紧急的。React会对所有紧急状态更新的视图进行并行渲染. 如果渲染任务比较重,页面渲染看起来会有些卡顿. React 将允许紧急状态更新（例如，更新文本输入）以中断非紧急状态更新（例如，呈现搜索结果列表）。

import {startTransition, useTransition} from 'react'

以搜索github用户为例: 输入关键字则立刻检索相关用户信息并渲染

App.js

import React, { useState } from 'react'
import Card from './Card'
export default function App() {
  const [keyWord, setKeyWord] = useState('')
  return (
    <div>
      请输入关键字:
      <input
        type="text"
        value={keyWord}
        onChange={(e) => {
          // react18 以前，所有的更新都是紧急的. 更新用户输入过程中，事件的触发频率非常，会导致大量重新渲染，页面可能会出现卡顿
          setKeyWord(e.target.value.trim())
        }}
      />
      <hr />
      <Card searchQuery={keyWord}></Card>
    </div>
  )
}

Card.js

import React from 'react'
import data from './data.json' // data.json中存储了很多github用户信息
export default function Card({ searchQuery }) {
  const filterData = data.filter((item) => {
    return item.login.includes(searchQuery)
  })
  return (
    <div className="row">
      {filterData.map((item) => {
        return (
          <div className="card" key={item.id}>
            <a target="_blank">
              <img src={item.avatar_url} style={{ width: '100px' }} />
            </a>
            <p className="card-text">{item.login}</p>
          </div>
        )
      })}
    </div>
  )
}

data.json

[
    {
    "login": "yi-ge",
    "id": 6657330,
    "node_id": "MDQ6VXNlcjY2NTczMzA=",
    "avatar_url": "https://avatars.githubusercontent.com/u/6657330?v=4",
    "gravatar_id": "",
    "url": "https://api.github.com/users/yi-ge",
    "html_url": "https://github.com/yi-ge",
    "followers_url": "https://api.github.com/users/yi-ge/followers",
    "following_url": "https://api.github.com/users/yi-ge/following{/other_user}",
    "gists_url": "https://api.github.com/users/yi-ge/gists{/gist_id}",
    "starred_url": "https://api.github.com/users/yi-ge/starred{/owner}{/repo}",
    "subscriptions_url": "https://api.github.com/users/yi-ge/subscriptions",
    "organizations_url": "https://api.github.com/users/yi-ge/orgs",
    "repos_url": "https://api.github.com/users/yi-ge/repos",
    "events_url": "https://api.github.com/users/yi-ge/events{/privacy}",
    "received_events_url": "https://api.github.com/users/yi-ge/received_events",
    "type": "User",
    "site_admin": false,
    "score": 1.0
  },
   ...忽略其他信息
]

我们可以使用useTransition告诉react,更新文本框文字是紧急的,更新searchQuery是非紧急的.让react优先渲染文本框,然后再渲染用户列表

import React, { useState, useTransition } from 'react'
import Card from './Card'
export default function App() {
  const [keyWord, setKeyWord] = useState('')
  const [searchQuery, setSearchQuery] = useState('')
  // 调用 useTransition, 可以得到一个isPending和startTransition
  // isPending表示 非紧急渲染是否在等待中 是boolean值
  // startTransition中定义state update(更新状态)的代码
  const [isPending, startTransition] = useTransition()
  return (
    <div>
      请输入关键字:
      <input
        type="text"
        value={keyWord}
        onChange={(e) => {
          setKeyWord(e.target.value.trim())
   
          //startTransition中定义state update代码
          startTransition(() => {
            setSearchQuery(e.target.value.trim())
          })
        }}
      />
      <hr />
      {isPending && <Progress />}
      <Card searchQuery={searchQuery}></Card>
    </div>
  )
}

useDeferredValue

useDeferredValue允许您推迟重新渲染树的非紧急部分。它类似于抖动，但与之相比有一些优点。没有固定的时间延迟，因此 React 将在第一次渲染反映在屏幕上后立即尝试延迟渲染。延迟渲染是可中断的，不会阻止用户输入

const [deferredValue] = useDeferredValue(value) // useDeferredValue 接受一个值并返回该值的新副本。如果当前渲染是紧急更新的结果，比如用户输入，应使用之前的值

import React, { useState, useDeferredValue } from 'react'
import Card from './Card'
import Progress from './Progress'
export default function App() {
  const [keyWord, setKeyWord] = useState('')
  const deferredKey = useDeferredValue(keyWord)

  return (
    <div>
      请输入关键字:
      <input
        type="text"
        value={keyWord}
        onChange={(e) => {
          setKeyWord(e.target.value.trim())
        }}
      />
      <hr />
      <Card searchQuery={deferredKey}></Card>
    </div>
  )
}
快乐风男0-12
关注
专栏目录
React中Hook使用案例
小周sri的码农
02-25 3886
React Hooks是React生态圈里边最火的新特性了。它改变了原始的React类的开发方式，改用了函数形式,通过一个小案例，理解对react hook的认知 安装react脚手架 create-react-app react-hook 创建一个组件FileSearch 在组件中引入react hook api import React, { useState, useEffect} fr...
React中Hook的简单使用
qq_42505615的博客
11-10 1209
Hook是什么？官方文档写的晦涩难懂。Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook是用于函数组件的，因为函数组件没有生命周期，也是无状态组件，所以我们不能和类组件一样用构造函数里面的state和setState。但是，我们可以用内置Hook来复用不同组件之间的状态逻辑。 先来说说第一个内置hook——State Hook。 1.State Hook 一句话概括：this.state的代替品。 ...
React中Hook的使用
WCBandCTZ的博客
06-17 1911
1.什么是Hook？ Hook是React 16.8的新增属性。可以在不编写calss的情况下使用state以及其他的React特性 2.Hook优势？ 其主要是为了解决一下几个常见问题： 在组件之间服用状态逻辑难 复杂组件变的难以理解 class学习及js中this的工作方式 简化周期函数，避免重复代码 … Hook可以让我们无需学习浮躁的函数式和响应式编程，同时也遵循React的精神原则。...
react使用Hook
weixin_45596380的博客
09-15 579
1.State Hook 在class中使用this.state来存放数据 对应到Hook中使用useState来设置数据信息 首先要引入useState import React,{useState} from "react"; 然后写一个组件函数 function Axample(){ // 声明多个state // 声明一个叫count的变量 const [count,setCount] = useState(1); const [count1,setCount1]
react hook使用
qq_45849232的博客
07-20 693
Hook是React16.8的新增特性。Hook是一些可以让你在函数组件里“钩入”Reactstate及生命周期等特性的js函数（就是让你可以用到类组件中的state和生命周期等函数）。，而并非强制按照生命周期划分。
react使用hook实现TodoList
Binglianxiaojiao的博客
12-26 611
全篇重点掌握react函数组件的使用、react的hook的定义与使用、函数式组件的父子间通讯、函数式组件的多级组件间通讯等，相应的知识点笔记后期会更新上，尽请期待.....注意点：需要调用ArrDisposeFn(()=>[...arr])回调方法，实现逻辑层与视图层同步改变，如果不调用会出现逻辑层数据改变，视图层数据不更新的bug。整个程序使用到的知识点：自定义组件、父子组件间通讯、多级组件间通讯、hook、自定义hook等。TodoList.jsx文件。Input.jsx文件。List.jsx文件。
react18中使用react-hook-form
风舞红枫的个人博客
09-12 895
react-hook-form使用记录
react-Hook使用
qq_61027269的博客
03-22 1306
hook的使用
TypeScript 中使用React Hook
大前端码农的博客
06-18 4213
从 React V 16.8.0 和 React Native 0.59.0 版本开始, 引入了React Hook的概念。React Hook 在开发支持就考虑到了类型，所以很多Hook函数可以直接推断出他们的参数、返回值等类型，但也有一些场景需要我们显示声明类型。阅读本文前你需要了解React Hook 的基本用法，参考这里。下面会总结一下我们如何在 TypeScript 中使用React H...
React自定义hook及使用规则
Cinderellahh92的博客
10-20 887
1.自定义hook // 自定义hook，命名要以use开头 function useClock(){ const [date,setDate] = useState(new Date()) useEffect(()=>{ const timer = setInterval(()=>{ setDate(new Date()) },1000) return ()=>clearInterval(timer) },[]) } 使用的时候 useClock() .
dva-react-hook:基于React Hooks的简洁轻量级框架
05-06
dva-react-hook 基于React Hooks的，简洁，轻量级的框架。 目录 安装 # Yarn yarn add dva-react-hook # NPM npm install --save dva-react-hook 在Node.js中 var dvaHook = require ( 'dva-react-hook' ) ; ...
用于WebSocket通信的React Hook-React开发
05-27
在StackBlitz中进行测试React Hook旨在为您的React组件提供强大的WebSocket集成。 对SocketIO的实验性支持（有关更多信息，请参见下面的文档）欢迎请求请求！ v2中的新增功能useWebSocket现在返回一个对象，而不是
react-hook-async:用React Hook异步
04-30
使用新的React钩子在React组件中使用异步的简单方法。 支持链接异步任务。 体积小，无需依赖 安装 yarn add react-hook-async 或者 npm i react-hook-async --save 用法 使用React时，执行异步任务是常见的动作...
react-hook-sticky:粘钩React
05-12
React钩发粘 粘性组件的高性能轻量级解决方案。...yarn add react-hook-sticky --exact 快速开始 基本的 // sticky-component.js import React from 'react' ; // 1 - Import import { useSticky , plu
react-hook-layout:React中的布局管理
05-01
该钩子是Layout组件模式的一种变体，已在网站上进行了描述，并在React文档中作为部分的一部分进行了提及。 它在页面和布局组件之间添加了一层抽象，并允许开发页面而无需事先创建布局组件。 在运行时在多个布局之间...
前端 js 处理一个数组 展示成层级下拉样式
lzfengquan的博客
10-17 219
前端开发中，不管是什么时候都会遇到select 下拉框的使用，一般情况下，数据处理后端都会处理好。前端一般使用相应技术栈所推荐的公共组件就可以了。前端处理的前提是要确定那个是父级元素，那个是子级元素，这样才能更好的处理数据。这个时候前端要写个方法去处理这个数组了。这个数组后端是会给的。
JS-常用功能
最新发布
qq_40950398的博客
10-18 198
汇总一些常用的js功能
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 763
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
深入解析：React中的信号组件与细粒度更新
Fisher的专栏
10-15 753
介绍了前端大火的signal原理，引入AutoStore为React提供了信号组件，帮助实现细粒度更新
react hook使用context
08-23
无论是原始写法还是使用context hook写法，它们都可以实现在React中使用上下文来共享数据。使用context hook写法可以减少代码量并简化组件的结构，使其更加简洁和易于理解。<span class="em">1</span><span class=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值