5分钟掌握React的Redux Toolkit + Redux
和 待办事项（Todo） 模块，并学习 Redux 的核心 API，如 createSlice、configureStore、useSelector 和 useDispatch。 2. 依赖安装 在 React 项目中安装 Redux Toolkit 和 React-Redux： npm install @reduxjs/toolkit react-redux 如果使用 TypeScript，还需安装类型支...
React第二十七章(Suspense)
port default AsyncComponent src/App.tsx 使用lazy进行异步加载组件，使用Suspense包裹异步组件，fallback指定加载过程中的占位组件 import React, { useRef, useState, Suspense,lazy } from 'react';const AsyncComponent = lazy(() => import('./comp...
React第二十六章(createPortal)
atePortal 注意这是一个API，不是组件，他的作用是：将一个组件渲染到DOM的任意位置，跟Vue的Teleport组件类似。 用法 import { createPortal } from 'react-dom'; const App = () => { return createPortal(<div>小满zs</div>, document.body);}; export default Ap...
React第二十五章(受控组件/非受控组件)
React 受控组件理解和应用 React 受控组件 受控组件一般是指表单元素，表单的数据由React的 State 管理，更新数据时，需要手动调用setState()方法，更新数据。因为React没有类似于Vue的v-model，所以需要自己实现绑定事件。 那为什么需要使用受控组件呢？ 使用受控组件可以确保表单数据与组件状态同步、便于集中管理和验证数据，同时提供灵活的事件处理机制以实现数据格式化和UI联...
vue3入门教程：reactive函数
基本用法 引入 reactive 首先，你需要从 vue 包中引入 reactive 函数： import { reactive } from 'vue'; 创建一个响应式对象 使用 reactive 函数来创建一个响应式对象： const state = reactive({ count: 0, name: 'Vue 3'}); 在这个例子中，state 是一个响应式对象，它包含了 count 和 n...
在 React 项目中安装和配置 Three.js
React 与 Three.js 的结合 ：通过 React 管理组件化结构和应用逻辑，利用 Three.js 实现 3D 图形的渲染与交互。使用这种方法，我们可以在保持代码清晰和结构化的同时，实现令人惊叹的 3D 效果。 在本文中，我们将以一个简单的示例为基础，详细讲解如何在 React 项目中集成 Three.js，并创建一个动态的 3D 场景。 本文介绍使用最原始的three，如果想了解 react...
React第二十章(useMemo)
useMemo useMemo 是 React 提供的一个性能优化 Hook。它的主要功能是避免在每次渲染时执行复杂的计算和对象重建。通过记忆上一次的计算结果，仅当依赖项变化时才会重新计算，提高了性能，有点类似于Vue的computed。 React.memo React.memo 是一个 React API，用于优化性能。它通过记忆上一次的渲染结果，仅当 props 发生变化时才会重新渲染, 避免重新渲...
React第二十一章(useCallback)
Callback useCallback 用于优化性能，返回一个记忆化的回调函数，可以减少不必要的重新渲染，也就是说它是用于缓存组件内的函数，避免函数的重复创建。 为什么需要useCallback 在React中，函数组件的重新渲染会导致组件内的函数被重新创建，这可能会导致性能问题。useCallback 通过缓存函数，可以减少不必要的重新渲染，提高性能。 用法 const memoizedCallback...
React和Three.js结合-React Three Fiber
简介 React Three Fiber（简称 R3F）是一个用于在 React 中渲染 3D 图形的库，它将 Three.js 与 React 的声明式编程模型结合起来。Three.js 是一个广泛使用的 JavaScript 库，用于在 Web 中创建 3D 场景、动画和互动效果，而 React 是一个流行的 JavaScript 库，专注于构建用户界面。React Three Fiber 使得开发者...
React第十九章(useContext)
useContext 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。设计的目的就是解决组件树间数据传递的问题。 用法 const MyThemeContext = React.createContext({theme: 'light'}); // 创建一个上下文 function MyComponent() { const themeContext = useContex...