【React】入门Day05 —— 知识点总结：useReducer、性能优化（涉及useMemo、React.memo、useCallback）、组件通信及zustand状态管理

于 2024-10-06 10:49:52 发布
阅读量517 收藏 3
点赞数 18
分类专栏： React 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2303_76696898/article/details/142723467
版权

一、useReducer

import { useReducer } from 'react';

// 定义reducer函数
function reducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, { id: Date.now(), text: action.payload, completed: false }];
    case 'TOGGLE_TODO':
      return state.map(todo =>
        todo.id === action.payload? {...todo, completed:!todo.completed } : todo
      );
    default:
      return state;
  }
}

function TodoApp() {
  const [todos, dispatch] = useReducer(reducer, []);

  const addTodo = (text) => {
    dispatch({ type: 'ADD_TODO', payload: text });
  };

  const toggleTodo = (id) => {
    dispatch({ type: 'TOGGLE_TODO', payload: id });
  };

  return (
    <div>
      <input type="text" placeholder="Add a new todo" onKeyPress={(e) => {
        if (e.key === 'Enter') {
          addTodo(e.target.value);
          e.target.value = '';
        }
      }} />
      <ul>
        {todos.map(todo => (
          <li key={todo.id} style={{ textDecoration: todo.completed? 'line-through' : 'none' }} onClick={() => toggleTodo(todo.id)}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

1. 基础使用

  • 作用：让 React 管理多个相对关联的状态数据。
  • 使用步骤
    • 定义reducer函数，根据不同的action返回不同的新状态。
    • 在组件中使用useReducer分派action，得到当前状态state和用于触发reducer的dispatch函数。
    • 通过调用dispatch函数传入action对象，触发reducer函数，分派action操作，更新视图。

2. 更新流程

  • 组件调用dispatch函数发送action。
  • reducer函数接收当前state和action，根据action类型计算新的state。
  • 组件使用新的state更新视图。

3. 分派 action 传参

  • 分派action时如果想传递参数，需在action对象中添加payload参数放置状态参数。reducer函数根据action类型和payload值计算新状态。

二、渲染性能优化

1. useMemo

import { useMemo, useState } from 'react';

function expensiveCalculation(num) {
  console.log('执行昂贵计算');
  let result = 0;
  for (let i = 0; i < 1000000; i++) {
    result += Math.random() * num;
  }
  return result;
}

function App() {
  const [count, setCount] = useState(1);
  const [otherValue, setOtherValue] = useState('');

  const memoizedResult = useMemo(() => expensiveCalculation(count), [count]);

  return (
    <div>
      <input type="number" value={count} onChange={(e) => setCount(Number(e.target.value))} />
      <input type="text" value={otherValue} onChange={(e) => setOtherValue(e.target.value)} />
      <p>计算结果: {memoizedResult}</p>
    </div>
  );
}
  • 作用：在每次重新渲染时缓存计算结果。
  • 使用场景及优化方式
    • 当一个计算结果依赖于某个状态，但该状态变化不应该每次都重新计算时使用。
    • 将计算逻辑放在useMemo的回调函数中，并将依赖的状态作为useMemo的依赖项数组传入，只有依赖项变化时才重新计算。

2. React.memo

import React, { useState } from 'react';

const ChildComponent = React.memo(function Child({ value }) {
  console.log('子组件渲染');
  return <div>{value}</div>;
});

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

  return (
    <div>
      <input type="number" value={count} onChange={(e) => setCount(Number(e.target.value))} />
      <input type="text" value={otherValue} onChange={(e) => setOtherValue(e.target.value)} />
      <ChildComponent value={count} />
    </div>
  );
}
  • 作用：允许组件在props没有改变的情况下跳过重新渲染。
  • 组件默认渲染机制及优化方式
    • 默认顶层组件重新渲染时，子组件都会重新渲染。
    • 使用React.memo包裹组件，只有props发生变化时才重新渲染。
    • 对于props的比较是浅比较，针对对象数据类型对比引用是否相等，可自定义比较函数实现深度比较。

3. useCallback

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

const ChildComponent = React.memo(function Child({ onButtonClick }) {
  console.log('子组件渲染');
  return <button onClick={onButtonClick}>点击我</button>;
});

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

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

  return (
    <div>
      <ChildComponent onButtonClick={handleButtonClick} />
      <p>计数: {count}</p>
    </div>
  );
}
  • 作用：缓存回调函数，使函数在组件渲染时保持引用稳定。
  • 使用场景及优化方式
    • 当给子组件传递回调函数类型的prop且希望在父组件重新渲染时子组件不重新渲染时使用。
    • 将回调函数用useCallback包裹，并传入依赖项数组，只有依赖项变化时回调函数引用才会改变。

三、forwardRef + useImperativeHandle

import React, { forwardRef, useImperativeHandle, useRef } from 'react';

const MyInputComponent = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  useImperativeHandle(ref, () => ({
    focus: focusInput
  }));

  return <input type="text" ref={inputRef} {...props} />;
});

function App() {
  const myInputRef = useRef(null);

  const handleFocus = () => {
    myInputRef.current.focus();
  };

  return (
    <div>
      <MyInputComponent ref={myInputRef} />
      <button onClick={handleFocus}>聚焦输入框</button>
    </div>
  );
}

1. forwardRef

  • 作用：允许组件使用ref将一个 DOM 节点暴露给父组件。

2. useImperativeHandle

  • 作用：如果不想暴露子组件中的 DOM 而是想暴露子组件内部的方法，可使用该函数。

四、Class API

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  incrementCount = () => {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  }

  render() {
    return (
      <div>
        <p>计数: {this.state.count}</p>
        <button onClick={this.incrementCount}>增加计数</button>
      </div>
    );
  }
}

function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

1. 基础体验

  • 使用 ES6 原生 Class API 编写 React 组件，包含状态变量定义、事件回调定义和 UI 模版渲染。

2. 组件生命周期

3. 组件通信

  • 父传子：通过props传递数据。
  • 子传父：子组件通过调用父组件传递的回调函数传递数据。

五、zustand

1. 快速上手

// store.js
import { create } from 'zustand';

const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 }))
}));

// App.js
import React from 'react';
import useStore from './store';

function App() {
  const { count, increment } = useStore();

  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={increment}>增加计数</button>
    </div>
  );
}
  • 创建 store：使用create函数创建store，定义状态和相关操作函数（如修改状态的函数）。
  • 绑定组件：在组件中使用useStore获取store中的状态和操作函数，并在视图中使用。

2. 异步支持

// store.js
import { create } from 'zustand';

const useStore = create(set => ({
  data: null,
  fetchData: async () => {
    const response = await fetch('https://example.com/api/data');
    const jsonData = await response.json();
    set({ data: jsonData });
  }
}));

// App.js
import React, { useEffect } from 'react';
import useStore from './store';

function App() {
  const { data, fetchData } = useStore();

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return (
    <div>
      {data? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>正在加载数据...</p>}
    </div>
  );
}
  • 直接在store的操作函数中编写异步逻辑，将获取的数据通过set函数更新store状态。

3. 切片模式

// counterSlice.js
import { create } from 'zustand';

const createCounterSlice = set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 }))
});

// userSlice.js
import { create } from 'zustand';

const createUserSlice = set => ({
  user: null,
  setUser: userData => set({ user: userData })
});

// store.js
import { create } from 'zustand';
import { createCounterSlice, createUserSlice } from './slices';

const useStore = create(set => ({
 ...createCounterSlice(set),
 ...createUserSlice(set)
}));

// App.js
import React from 'react';
import useStore from './store';

function App() {
  const { count, increment, user, setUser } = useStore();

  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={increment}>增加计数</button>
      <p>用户信息: {user? JSON.stringify(user) : '未登录'}</p>
      <button onClick={() => setUser({ name: 'John', age: 30 })}>设置用户信息</button>
    </div>
  );
  • 当store较大时，可将其拆分成多个切片（每个切片定义相关的状态和操作），然后组合这些切片创建最终的store。

4. 对接 DevTools

  • 安装simple-zustand-devtools调试工具，在开发环境下配置并使用该工具调试store状态变化。
计时开始不睡觉
关注
专栏目录
React状态管理与性能优化：深入探索useReducer、useMemo、React.memo、useCallback、forwardRef、useImperativeHandle及Zustand
DZSpace，专注于计算机科学与技术领域的技术博主，致力于分享实用知识与技巧，帮助读者快速掌握技术要点，共同探索计算机世界的无限可能。欢迎访问DZSpace的博客，一起学习进步！
08-06 334
React状态管理与性能优化：深入探索useReducer、useMemo、React.memo、useCallback、forwardRef、useImperativeHandle及Zustand
React组件性能优化中如何避免频繁更新？
程序员—DaLi Sexy
05-25 573
在React开发中，避免组件的频繁更新是提升应用性能的关键手段之一。React提供了多种策略和工具来帮助开发者优化组件的更新频率。
react组件通信、redux、react-redux、zustand整理
qq_38160881的博客
06-11 506
children是一个比较特殊的prop,支持多种不同类型数据的传入，需要通过一个内置的ReactNode类型来做注解。传递一个引用类型的prop,比较的是新值和旧值的引用是否相等，当父组件的函数重新执行时，实际上形成的是新的数组引用。props是只读对象，子组件只能读取props中的数据，不能直接进行修改，父组件的数据只能由父组件修改。useCallback：在组件多次重新渲染的时候缓存函数，保证在app重新渲染的时候保持引用稳定。定义一个reducer函数（根据不同的action返回不同的新状态）
20230527----重返学习-React复合组件通信方案-TodoList组件拆分-React组件二次封装
seetoyou的博客
05-27 696
父子通信：属性「偶尔获取子组件实例/暴露方法」。备注：调用UI组件库中的组件，都是父子通信。所以虽然感觉父子组件间限制很多，但在业务中的应用场景反而是最多最常用的。小型项目中，非父子（或者也不是同一个父组件的），可以基于 祖先和后代「主要是上下文方案」进行处理！因为根组件必定可以是一个项目中所用到的所有业务组件的共同祖先元素。所以这种方式，理论上也可以当成是能通用的方式。但是一旦项目比较大，需要共享的信息多了，都放在祖先中也不方便维护和管理！
前端框架_React知识点精讲
weixin_52884694的博客
10-26 3741
❝ 当我们心情愉悦时，大脑会分泌一种叫「内啡肽」的神经递质，它能帮助我们减轻疼痛。 ❞ 大家好，我是「柒八九」。 今天，我们继续「前端面试」的知识点。我们来谈谈关于「React知识点」的相关知识点和具体的算法。 该系列的文章，大部分都是前面文章的知识点汇总，如果想具体了解相关内容，请移步相关系列，进行探讨。 如果，想了解该系列的文章，可以参考我们已经发布的文章。如下是往期文章。 文章list CSS重点概念精讲JS_基础知识点精讲网络通信_知识点精讲JS_手写实现前端工程化_知识点精讲 好了，天不早了，干
【React】Day10
weixin_63681863的博客
05-05 637
如果上一小节的例子，我们不想通过引用来比较，而是完全比较数组的成员是否完全一致，则可以通过自定义比较函数来实现// 自定义比较函数return (})console.log('子组件被重新渲染了')console.log('父组件重新渲染了')return (内容一样{JSON.stringify(list)}内容不一样{JSON.stringify(list)}
65道常问前端面试题总结react
Front end development engineer
11-22 2802
65道常问前端面试题总结react
React Flow
qq_41482600的博客
07-28 2398
【代码】React Flow。
react 18
m0_48853274的博客
05-29 390
概念:JSX是JavaScript和XML(HTML)的缩写，表示在JS代码中编写HTML模版结构,它是React中编写UI模版的方式优势:1.HTML的声明式模版写法2.JS的可编程能力。
react-zustand-todo：使用React和zustand创建的简单todo应用程序
02-18
7. **测试和优化**：确保所有功能正常工作，然后进行性能优化，如使用React.memo避免不必要的重新渲染。 通过这个React-Zustand Todo应用程序，我们可以看到如何在React应用中使用zustand轻松管理状态。这种方式...
StateInReact:在React系列中为我的状态教学资源库
05-01
10. **性能优化**：在处理状态更新时，了解`shouldComponentUpdate`、`React.memo`以及PureComponent等优化技术可以帮助减少不必要的渲染，提高应用性能。 这个"StateInReact"教学资源库很可能包含了以上这些知识点...
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 606
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
登录功能开发 P167重点
最新发布
2303_81204446的博客
09-30 380
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1179
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 5857
Webpack 打包后文件过大，如何优化？
第十一章 【前端】调用接口（11.1）——Vite 环境变量
qdbest的专栏
09-29 140
Vite。
前端面试经验总结2(经典问题篇)
rita_0567的博客
09-28 1027
因为计算机技术的快速发展，所以程序员如果不能保持对技术的持续性学习，会更容易的被淘汰，我从来不觉得程序员是一个轻松的职业，但是程序员是我最热爱的职业，我做好了充足的准备让自己能够长期在前端行业深耕。既要扩充自己的知识宽度，同时又不要一味的追求学习的东西越多越来，今天学两天这个，明天学两天那个，工作中又没有得到使用的话，很快也都会忘记的。了解，贵公司主要是在xxx行业从事xxx业务，贵公司所处的行业是我非常看好的，我感觉贵公司的氛围我很喜欢，比如xxxx。遇到了哪些挑战，我如何在不利的条件下成长起来的。
基于webComponents的纯原生前端框架
u013776700的博客
09-28 277
采用artComponent模板引擎,在数据更新后实现UI更新，当然这里做了优化处理,尽量减小页面渲染受影响的范围，实现最小化更新。基于框架，开发了一套常用UI组件，提升开发速度。组件库采用开放原则，也就是说别人都可以使用我的开发接口去开发组件库。我本人的个人开发web前端前框架xui，正在开发中，业已完成50%的核心开发工作，并且在开发过程中逐渐完善.目前框架未采用任何和市面上框架模式，没有打包过程，实现真实的开箱即用。框架完成了事件触发和事件监听的封装，在页面和组件事件处理上更加方便。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值