React的10个常用Hooks及使用场景

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

React是一款非常流行的JavaScript库,它提供了许多Hooks,用于管理函数组件的状态和生命周期。下面是React的每个Hooks的使用场景和示例:

No1、useState

useState用于在函数组件中管理状态。
它返回一个包含当前状态和一个更新状态的函数的数组。更新状态的函数可以接受一个新的值,并更新状态。

import React, { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

  return <button onClick={handleClick}>Count: {count}</button>;
}

No2、useEffect

useEffect用于在函数组件中处理副作用。
它接受两个参数:一个副作用函数和一个依赖数组。当依赖数组中的任何一个值发生变化时,副作用函数将被调用。

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

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(time + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, [time]);

  return <div>Time: {time}</div>;
}

No3、useContext

useContext用于在函数组件中使用上下文。
它接受一个上下文对象并返回上下文的当前值。当上下文的值发生变化时,函数组件将重新渲染。

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

const ThemeContext = createContext('light');

function Header() {
  const theme = useContext(ThemeContext);

  return (
    <header style={{ background: theme }}>
      <h1>My App</h1>
    </header>
  );
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Header />
    </ThemeContext.Provider>
  );
}

No4、useReducer

useReducer用于在函数组件中管理复杂的状态。
它接受一个reducer函数和一个初始状态,并返回一个包含当前状态和一个派发操作的数组。派发操作将一个操作对象发送到reducer函数中,并返回一个新的状态。

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  function handleIncrement() {
    dispatch({ type: 'increment' });
  }

  function handleDecrement() {
    dispatch({ type: 'decrement' });
  }

  return (
    <>
      <button onClick={handleIncrement}>+</button>
      <span>{state.count}</span>
      <button onClick={handleDecrement}>-</button>
    </>
  );
}

No5、useCallback

useCallback用于在函数组件中缓存回调函数。
它接受一个回调函数和一个依赖数组,并返回一个缓存的回调函数。当依赖数组中的任何一个值发生变化时,缓存的回调函数将被更新。

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

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

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <>
      <Child onClick={handleClick} />
      <span>Count: {count}</span>
    </>
  );
}

function Child({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
}

No6、useMemo

useMemo用于在函数组件中缓存计算结果。
它接受一个计算函数和一个依赖数组,并返回一个缓存的计算结果。当依赖数组中的任何一个值发生变化时,计算函数将被重新计算。

import React, { useMemo } from 'react';

function ExpensiveComponent({ value1, value2 }) {
  const result = useMemo(() => {
    console.log('calculating result');
       return value1 * value2;
  }, [value1, value2]);

  return <div>Result: {result}</div>;
}

No7、useRef

useRef用于在函数组件中引用DOM元素或其他值。
它返回一个包含可变引用的对象。当在函数组件中传递该对象时,它将保留其引用,即使组件重新渲染。

import React, { useRef } from 'react';

function Input() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus input</button>
    </>
  );
}

以上是React的每个Hooks的使用场景和示例。这些Hooks可以帮助我们更加方便地管理状态和生命周期,并且提高代码的可读性和可维护性。

总结

useState:用于在函数组件中管理状态。可以用于跟踪和更新组件的内部状态,例如表单输入、开关状态、计数器等。

useEffect:用于处理副作用操作,例如数据获取、订阅事件、DOM操作等。可以在组件渲染后执行一些操作,也可以在组件卸载前进行清理操作。

useContext:用于在组件之间共享数据。可以创建一个全局的上下文,并在组件树中的多个组件中访问和更新该上下文。

useReducer:用于管理复杂的状态逻辑。可以用于替代useState,特别适用于具有复杂状态转换的组件,例如有限状态机、游戏状态等。

useCallback:用于性能优化。可以缓存函数实例,以便在依赖项不变的情况下避免不必要的函数重新创建,提高组件的性能。

useMemo:用于性能优化。可以缓存计算结果,以便在依赖项不变的情况下避免重复计算,提高组件的性能。

useRef:用于在函数组件中保存可变值的引用。可以用于保存DOM元素的引用、保存上一次渲染的值等。文章来源地址https://www.toymoban.com/news/detail-489938.html

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

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

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

相关文章

  • react中hooks的理解与使用

    一、作用 我们知道react组件有两种写法一种是类组件,另一种是函数组件。而函数组件是无状态组件,如果我们要想改变组件中的状态就无法实现了。为此,在react16.8版本后官方推出hooks,用于函数组件更改状态。 二、常用API 1、useState :存储变量和修改变量 用法: 有两个参

    2024年02月13日
    浏览(35)
  • React - Redux Hooks的使用细节详解

    Redux中Hooks介绍 在之前的redux开发中,为了让组件和redux结合起来,我们使用了react-redux库中的connect : 但是这种方式必须使用高阶函数结合返回的高阶组件; 并且必须编写:mapStateToProps和 mapDispatchToProps映射的函数, 具体使用方式在前面文章有讲解; 在Redux7.1开始,提供了Hook的方式

    2024年02月02日
    浏览(50)
  • React Hooks的useState、useRef使用

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

    2024年02月02日
    浏览(44)
  • react 【七】各种hooks的使用/SPA的缺点

    依然需要在index.js使用context 1.8.1 ref绑定dom 1.8.2 ref解决闭包缺陷 1.11.1 什么是自定义Hook 1.11.2 Context的共享 Hook 1.11.3 获取鼠标滚动位置 1.11.4 storage SPA页面 1、不利于SEO优化搜索引擎优化 2、首屏渲染速度慢 1、不利于SEO优化搜索引擎优化 例如百度页面在进行收录的时候 是

    2024年02月20日
    浏览(33)
  • React 中与生命周期相关的 Hooks 及其使用示例

    React 16.8 引入了 Hooks 的概念,使得函数组件也可以使用 state 和生命周期等特性。与生命周期相关的 Hooks 主要有以下三个: useEffect useEffect 是最常用的一个 Hook,它可以用来替代 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 这三个生命周期函数。useEffect 的作

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

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

    2024年02月14日
    浏览(35)
  • react之Hooks的介绍、useState与useEffect副作用的使用

    Hooks 是 React v16.8 中的新增功能 为函数组件提供状态、生命周期等原本 class 组件中提供的 React 功能 可以理解为通过 Hooks 为函数组件钩入 class 组件的特性 注意:Hooks 只能在函数组件中使用,自此,函数组件成为 React 的新宠儿 可以在项目中同时使用hooks和class 一个 Hook 就是一

    2024年02月12日
    浏览(39)
  • react hooks 中使用 addEventListener 监听事件无法访问到最新的 state 的问题

    如上述代码所示,props.asyncData 变化之后 hasAsyncData 设置为 true,然后滚动页面,handleMove 中的 hasAsyncData 仍然为初始值 false。 所以这时要在 hasAsyncData 变化后 ,重新绑定 addEventListener 事件 useEffect(() = {   }, [hasAsyncData]) 在useEffect中将他监听起来,从新绑定

    2024年01月21日
    浏览(45)
  • ahooks.js:一款强大的React Hooks库及其API使用教程(四)

    ahooks是一款由阿里巴巴开发团队设计的React Hooks库,提供了一系列实用的React Hooks,以便开发者更好地使用React的功能。ahooks的设计原则是“最小API,最大自由”,旨在提供最小的、最易于理解和使用的API,同时保留最大的使用自由度。 使用npm或yarn安装ahooks: API介绍合集:

    2024年02月11日
    浏览(34)
  • ahooks.js:一款强大的React Hooks库及其API使用教程(二)

    ahooks是一款由阿里巴巴开发团队设计的React Hooks库,提供了一系列实用的React Hooks,以便开发者更好地使用React的功能。ahooks的设计原则是“最小API,最大自由”,旨在提供最小的、最易于理解和使用的API,同时保留最大的使用自由度。 使用npm或yarn安装ahooks: 前面的API:aho

    2024年02月12日
    浏览(30)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包