首页 > 其他分享 >React Hooks 中的属性详解

React Hooks 中的属性详解

时间:2023-08-04 10:03:22浏览次数:40  
标签:count return 函数 Hooks React state 详解 组件

React Hooks 是 React 16.8 版本中新增的特性,允许我们在不编写 class 的情况下使用 state 和其他的 React 特性。Hooks 是一种可以让你在函数组件中“钩入” React 特性的函数。以下是一些常用的 React Hooks,并附有详细的用法和代码示例。

1. useState

useState 是一个 Hook 函数,让我们在 React 函数组件中添加局部 state,而不必将它们修改为 class 组件。

import React, { useState } from 'react';

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

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

在这里,useState 是一个函数,它接收初始 state 作为参数,返回一个数组,其中第一个元素是当前的 state,第二个元素是一个更新 state 的函数。

2. useEffect

useEffect Hook 可以让你在函数组件中执行副作用操作。数据获取、订阅或者手动修改 DOM 都属于副作用。

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

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

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

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

在这个示例中,我们在组件渲染后设置了 document 的 title。我们传递给 useEffect 的函数会在每次渲染后都执行。如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

3. useContext

useContext Hook使你可以订阅 React 的 Context 而不必明确的在组件树中间传递 props。

import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button theme={theme}>I am styled by theme context!</button>;
}

在这个示例中,我们使用 useContext Hook 订阅了 ThemeContext,并将其值赋给 theme 变量。当 ThemeContext 更新时,组件会重新渲染,并使用最新的 context 值。

4. useReducer

useReducer 是另一个可以在函数组件中保存 state 的 Hook,但它更适用于有复杂 state 逻辑的组件,它接受一个 reducer 函数和初始 state 作为参数,返回当前的 state 以及与其配套的 dispatch 方法。

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);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'increment'})}>+1</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-1</button>
    </>
  );
}

在这个示例中,我们使用 useReducer 来处理 state 的更新逻辑。我们传递给 useReducer 的 reducer 函数会在每次 dispatch 时被调用。

5. useCallback

useCallback 返回一个记忆化版本的回调函数,它仅在依赖项改变时才会更新。当你将回调传递给被优化的子组件时,它可以防止因为父组件渲染而无谓的渲染子组件。

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

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

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

  return (
    <div>
      Count: {count}
      <Button onClick={increment}>Increment</Button>
    </div>
  );
}

function Button({ onClick, children }) {
  console.log("Button re-rendered");

  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

在这个示例中,我们通过 useCallback 创建了一个只有当 count 改变时才会更新的 increment 函数。这样,只有当 increment 函数改变时,Button 组件才会重新渲染。

6. useMemo

useMemo 返回一个记忆化的值。它仅在某个依赖项改变时才重新计算 memoized 值。这用于优化性能,避免在每次渲染时都进行高开销的计算。

import React, { useMemo } from "react";

function MyComponent({ list }) {
  const processedData = useMemo(() => {
    return processData(list);
  }, [list]);

  return <OtherComponent data={processedData} />;
}

在这个示例中,我们只有当 list 改变时,才使用 processData 函数重新计算 processedData。这样可以避免在每次渲染 MyComponent 时都进行数据处理,从而优化性能。

总结起来,Hooks 提供了一种更直接的 API 来使用React 的各种特性,如:state,context,reducers 和生命周期。这使得你在没有写 class 的情况下可以直接在你的函数组件中使用这些特性。

总的来说,Hooks 是一种强大的工具,它使我们能够在函数组件中使用 React 的各种特性。同时,Hooks 还帮助我们更好地组织代码,使其更易于理解和维护,优化了应用程序的性能和响应速度。

以上就是 React Hooks 的一些重要属性的详细解析。

标签:count,return,函数,Hooks,React,state,详解,组件
From: https://blog.51cto.com/u_16171861/6957275

相关文章

  • 第一节:Lvs软件负载技术详解
    一.        二.        三.         !作       者:Yaopengfei(姚鹏飞)博客地址:http://www.cnblogs.com/yaopengfei/声     明1:如有错误,欢迎讨论,请勿谩骂^_^。声     明2:原创博客请在转载......
  • Hive Merge详解
    说明Hive在2.2版本之后开始支持Merge操作,并且Merge只能在支持ACID的表上执行语法MERGEINTO<targettable>ASTUSING<sourceexpression/table>ASSON<booleanexpression1>WHENMATCHED[AND<booleanexpression2>]THENUPDATESET<setclauselist>WHEN......
  • 9.2.Config Server 配置规则详解
    9.2.ConfigServer配置规则详解在上面,我们用于测试的配置文件:futurecloud.ymlfuturecloud-dev.ymlfuturecloud-test.ymlfuturecloud-pre.ymlfuturecloud-stable.ymlfuturecloud-apigetway-zuul.yml“-”前面的部分可以随便定义,一般我们用应用名来定义,后面的deb、test…也可以随......
  • spring-mvc系列:详解@RequestMapping注解(value、method、params、header等)
    目录一、@RequestMapping注解的功能二、@RequestMapping注解的位置三、@RequestMapping注解的value属性四、@RequestMapping注解的method属性五、@RequestMapping注解的params属性六、@RequestMapping注解的header属性七、SpringMVC支持ant分格的路径八、SpringMVC支持路径中的占......
  • 【jmeter系列】仅一次控制器+正则表达式用法详解
    一、仅一次控制器做性能测试经常遇到这样的问题:要做接口压力测试,但是需要登录接口返回的token,但是不需要对登录接口进行压测,这个时候jmeter仅一次控制器就起到了关键性的作用。具体操作如下:1、添加仅一次控制器,并在控制器下添加登录接口 2、登录接口返回响应数据-Responesb......
  • update-alternatives 使用详解
    alternatives管理方式$ls-l/usr/bin/pythonlrwxrwxrwx1rootroot2411202017/usr/bin/python->/etc/alternatives/python$ls-l/etc/alternatives/pythonlrwxrwxrwx1rootroot1811212017/etc/alternatives/python->/usr/bin/python2.7python这个可执行命......
  • JAVA系列之类加载机制详解
    文章目录一、类加载过程二、类生命周期1、加载2、验证3、准备4、解析5、初始化三、双亲委派机制四、自定义类加载器的应用1、源代码加密2、隔离加载类3、热加载/热部署4、扩展加载源类的加载机制?双亲委派机制?什么是类加载器?自定义类加载器有哪些应用场景?通常,在关于Java的......
  • 【完结15章】React18+TS 通用后台管理系统解决方案落地实战
    课程下载——【完结15章】React18+TS通用后台管理系统解决方案落地实战 提取码:qwu4 给大家分享一套课程——React18+TS通用后台管理系统解决方案落地实战,已完结15章,附源码+笔记。TypeScript是微软开发的一个开源的编程语言,通过在JavaScript的基础上添加静态类型定义构建而成......
  • mysql事务和索引详解
    mysql事务和索引详解1.事务注:事务就是一组操作的集合,成功一起成功,失败一起失败事务控制:开启事务:starttransaction;/begin;提交事务:commit;回滚事务:rollback;使用方法:首先graphTBid1[开启事务]-->id2{执行mysql}id2-->|语句全部执行成功|id3>提交事务]id2-->|语......
  • 《Ext详解与实践》节选:自定义单元格的显示格式
    有时候,需要在Grid中显示一个链接,或根据数字的大小显示不同的颜色,又或者使用固定格式显示记录编号等,这就需要自定义单元格的显示格式。在Ext的Grid可以很容易的实现自定义单元格的显示格式。在定义Grid的ColumnModel的时候,在需要自定义显示格式的列中加入参数renderer,该参数指向一个......