Day10 React———— 第十天

useReducer

useReducer 是 React Hooks 中的一个函数,用于管理组件的状态。它类似于 useState,但提供了更复杂的状态逻辑处理能力。 接受一个 reducer 函数和初始状态作为参数,并返回当前状态和 dispatch 函数。

使用 useReducer 的基本流程如下:

  1. 定义一个 reducer 函数,接受当前状态和 action 参数,并根据 action 的类型来更新状态。
  2. 在组件中使用 useReducer,传入 reducer 函数和初始状态,得到当前状态和 dispatch 函数。
  3. 在需要更新状态的地方,调用 dispatch 函数并传入对应的 action,从而触发 reducer 函数更新状态。
javascript 复制代码
const reduce = (state, action) => {
  switch (action.type) {
    case "add":
      return state + 1;
    case "dsc":
      return state - 1;
    case "update":
      return action.payload
    default:
      break;
  }
};

export default function App() {
  const [state, dispatch] = useReducer(reduce,0)
  return (
    <div>
      <button
        onClick={() => {
          dispatch({ type: "add" });
        }}
      >
        +
      </button>
      {state}
      <button
        onClick={() => {
          dispatch({ type: "dsc" });
        }}
      >
        -
      </button>

      <button
        onClick={() => {
          dispatch({ type: "update", payload:1000 });
        }}
      >
        update
      </button>
    </div>
  );
}

useMemo

useMemo是React Hooks中的一个函数,用于优化性能。它接收一个函数和一个依赖数组作为参数,返回一个memoized(记忆化)的值。当依赖数组中的值发生变化时,useMemo会重新计算并返回新的值,否则会直接返回上一次计算的结果。

useMemo的作用是避免在每次渲染时都重新计算相同的值,尤其是在计算量较大的情况下,可以显著提高性能。常见的用法包括计算一些昂贵的值、避免不必要的重复渲染等。

javascript 复制代码
// useMemo
// 缓存: 消耗非常大的计算

import { useMemo, useState } from "react";

// 计算斐波那契数列之和
function fib(n) {
  console.log("计算函数执行了");
  if (n < 3) return 1;
  return fib(n - 2) + fib(n - 1);
}

function App() {
  const [count1, setCount1] = useState(0);

  const result = useMemo(() => {
    // 返回计算得到的结果
    return fib(count1);
  }, [count1]);

  // const result = fib(count1)

  const [count2, setCount2] = useState(0);
  console.log("组件重新渲染了");
  return (
    <div className="App">
      this is app
      <button onClick={() => setCount1(count1 + 1)}>
        change count1: {count1}
      </button>
      <button onClick={() => setCount2(count2 + 1)}>
        change count2: {count2}
      </button>
      {result}
    </div>
  );
}

export default App;

React memo的使用

作用:允许组件在 Props没有改变 的情况下跳过渲染
React组件默认的渲染机制:只要父组件重新渲染子组件就会重新渲染
基本语法:

javascript 复制代码
import React from "react";
import { useState, memo } from "react";

const MemoZi = memo(function Zi() {
  console.log("我是子组件");
  return <div>this is Zi commponent</div>;
});

export default function App() {
  const [num, setNum] = useState(0);
  return (
    <div>
      App
      <MemoZi />
      {num}
      <button
        onClick={() => {
          setNum(num + 1);
        }}
      >
        +1
      </button>
    </div>
  );
}

useCallback

是 React Hooks 中的一个函数,用于优化性能和避免不必要的重新渲染。

当一个组件使用 useCallback 包裹一个函数时,它会返回一个记忆化的版本的函数。这意味着只有当依赖项发生变化时,才会返回新的函数。这可以避免在每次渲染时都创建新的函数实例,从而减少不必要的内存消耗和重新渲染。

useCallback 接受两个参数:第一个参数是一个函数,第二个参数是一个依赖项数组。当依赖项数组中的任何一个值发生变化时,useCallback 会返回一个新的函数。如果依赖项数组为空,useCallback 会在每次渲染时都返回同一个函数。

javascript 复制代码
// useCallback

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

const Input = memo(function Input({ onChange }) {
  console.log("子组件重新渲染了");
  return <input type="text" onChange={(e) => onChange(e.target.value)} />;
});

function App() {
  // 传给子组件的函数
  const changeHandler = useCallback((value) => console.log(value), []);
  // 触发父组件重新渲染的函数
  const [count, setCount] = useState(0);
  return (
    <div className="App">
      {/* 把函数作为prop传给子组件 */}
      <Input onChange={changeHandler} />
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </div>
  );
}

export default App;

forwardRef

forwardRef 是 React 中的一个高级函数,用于在函数组件中转发(forward)refs。在 React 中,refs 是用来引用 DOM 元素或类组件实例的对象,它们通常在类组件中使用。但是在函数组件中使用 refs 可能会有一些限制,特别是在组件包裹或嵌套的情况下。forwardRef 的目的就是解决这些问题。

当使用 forwardRef 包裹函数组件时,它可以将 ref 透传给函数组件内部的某个子组件,从而允许函数组件访问这个 ref。就可以在函数组件中使用 ref 来引用子组件或 DOM 元素。

以下是 forwardRef 的基本用法:

javascript 复制代码
import React from "react";
import { useRef, forwardRef } from "react";


const Zi = forwardRef((props,ref)=>{
  return (
    <input type="text" ref={ref} />
  )
})



export default function App() {
  const r = useRef(null);
  const getR = () => {
    console.log(r);
  };
  return (
    <div>
      <Zi ref={r} />
      <button onClick={getR}>click</button>
    </div>
  );
}
相关推荐
秦jh_7 分钟前
【Linux】多线程(概念,控制)
linux·运维·前端
蜗牛快跑21320 分钟前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy21 分钟前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
涔溪1 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与2 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun2 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇2 小时前
ES6进阶知识一
前端·ecmascript·es6
前端郭德纲2 小时前
浏览器是加载ES6模块的?
javascript·算法