Tag:reactjs
All the articles with the tag "reactjs".
React 是怎么渲染出页面的？
Posted on:2024年9月19日 at 01:27React 渲染页面的过程主要包括以下几个步骤： 1. 创建虚拟 DOM 组件定义：当你定义一个组件并调用 render 方法时，React 会根据组件的 JSX 结构创建一个虚拟 DOM。这是一个轻量级的 JavaScript 对象，描述了 UI 的结构。 2. 渲染到真实 DOM 初始渲染：在组件首次渲染时，React 会将虚拟 DOM 转换为实际的 DOM 元素，并将其插入到页面中。通常是通
React 中，构建组件的方式有哪些？
Posted on:2024年9月19日 at 01:24在 React 中，构建组件的方式主要有以下几种： 1. 函数组件 (Function Components) 函数组件是最常用的组件形式，使用 JavaScript 函数来定义。自 React Hooks 引入以来，函数组件得到了广泛使用。 import React from 'react'; const MyComponent = () => { return <div>Hello, Func
React 中，怎么给 children 添加额外的属性？
Posted on:2024年9月4日 at 01:23在 React 中，children 是一个特殊的 prop，用于传递子组件或元素。虽然直接给 children 添加属性是不可能的，但可以使用一些方法来为子组件传递额外的属性。 方法一：使用 React.cloneElement React.cloneElement 是 React 提供的一个 API，用于克隆一个元素并添加额外的属性。这种方法适用于在渲染过程中动态地为 children 添加属
React 中的 hooks 和 memorizedState 是什么关系?
Posted on:2024年9月4日 at 01:19在 React 中，Hooks 和 MemorizedState 都与组件的状态管理和性能优化有关，但它们的作用和实现方式不同。 Hooks Hooks 是 React 16.8 引入的一组 API，使函数组件能够拥有状态和副作用管理的能力，之前这些特性只有在类组件中才可以使用。常用的 Hooks 包括： useState：用于在函数组件中添加状态。 useEffect：用于处理副作用，如数据获取
React Hooks 在使用上有哪些限制？
Posted on:2024年9月3日 at 13:10React Hooks 的限制主要有两条： 不要在循环、条件或嵌套函数中调用 Hook； 在 React 的函数组件中调用 Hook。 那为什么会有这样的限制呢？就得从 Hooks 的设计说起。Hooks 的设计初衷是为了改进 React 组件的开发模式。在旧有的开发模式下遇到了三个问题。 组件之间难以复用状态逻辑。过去常见的解决方案是高阶组件、render props 及状态管理框架。 复杂的组
说说你对 React Hook的闭包陷阱的理解，有哪些解决方案？
Posted on:2024年9月3日 at 13:08本文从 一个hooks中 “奇怪”（其实符合逻辑） 的 “闭包陷阱” 的场景切入，试图讲清楚其背后的因果。同时，在许多 react hooks 奇技淫巧的文章里，也能看到 useRef 的身影，那么为什么使用 useRef 又能摆脱 这个 “闭包陷阱” ？ 搞清楚这些问题，将能较大的提升对 react hooks 的理解。 react hooks 一出现便受到了许多开发人员的追捧,或许在使用rea
react 中，在什么场景下需要使用 useContext？
Posted on:2024年8月28日 at 01:10在 React 中，useContext 是一个用于在组件树中共享状态或数据的钩子。它允许我们在没有通过属性逐层传递的情况下，将数据从祖先组件传递到后代组件。useContext 主要用于避免 prop drilling 问题，即当需要将数据从顶层组件传递到深层嵌套的组件时，可能会涉及多层组件传递属性，代码会变得冗长和难以维护。 使用 useContext 的场景 全局状态管理： 当你需要在多个组
react 中，数组用useState做状态管理的时候，使用push，pop，splice等直接更改数组对象，会引起页面渲染吗？
Posted on:2024年8月23日 at 05:27在 React 中，直接使用 push、pop、splice 等方法修改数组不会触发页面重新渲染。React 的状态更新机制依赖于状态的不可变性（immutability），即通过创建新的状态对象来更新状态。直接修改原始状态对象（如数组）不会创建新的对象引用，因此 React 不会检测到状态的变化，也不会触发重新渲染。 为什么直接修改数组不触发渲染 React 使用 Object.is（或其变体）
使用 react-router 跳转时，如何将参数传递给下一个页面？
Posted on:2024年8月20日 at 11:24在 react-router 中实现页面跳转并传递参数，可以通过以下几种方式来完成： 1. 通过 URL 参数传递 定义路由时： 在定义路由时，可以使用 URL 参数。例如： <Route path="/user/:id" component={User} /> 跳转时： 使用 useHistory 或 useNavigate（在 React Router v6 中）进行跳转时，可以将参数添加到
React 中的 createContext 和 useContext 分别有什么用？
Posted on:2024年8月17日 at 05:01在 React 中，createContext 和 useContext 是处理上下文的两个相关 API，但它们的功能和用途有所不同： 1. createContext 作用：用于创建一个新的上下文对象。 用法：调用 createContext 会返回一个上下文对象，这个对象包含 Provider 和 Consumer 组件。Provider 用于提供上下文的值，而 Consumer 用于消费上下
说说你对 createPortal 的了解
Posted on:2024年8月15日 at 23:09ReactDOM.createPortal 是 React 的一个 API，用于将子节点渲染到 DOM 的不同部分，而不是当前组件的父级节点中。这对于需要在 DOM 的不同层级中插入内容（如模态框、工具提示、下拉菜单等）非常有用，因为它允许我们将子元素渲染到指定的 DOM 节点中，保持其逻辑上的位置和结构。 createPortal 的用法 ReactDOM.createPortal(child,
React 中，fiber 是如何实现时间切片的？
Posted on:2024年8月15日 at 19:13Fiber 的时间切片（Time Slicing）是一种优化 React 渲染性能的技术，它允许将长时间运行的任务分解成多个小任务，以便在主线程上交替执行其他任务，从而提高用户界面的响应性。以下是时间切片在 Fiber 架构中实现的主要原理和步骤： 1. 任务拆分和优先级 任务拆分：Fiber 架构允许将长时间运行的任务（如组件更新）拆分成多个小的 Fiber 节点处理单元。这些小任务可以在浏览器
说说 React commit 阶段的执行过程
Posted on:2024年8月15日 at 19:11在 React 的 Fiber 架构中，commit 阶段是将更新应用到实际 DOM 的关键步骤。这个阶段处理在 render 阶段中计算出的所有副作用，并实际更新页面内容。以下是 commit 阶段的详细执行过程： 1. 提交 Fiber 树 获取 Fiber 树：commit 阶段开始时，React 会获取从 render 阶段生成的 Fiber 树。这棵树包含所有需要更新的 Fiber 节点
说说 React render 阶段的执行过程
Posted on:2024年8月15日 at 19:09在 React 的 Fiber 架构中，render 阶段是处理组件更新和生成虚拟 DOM 的关键阶段。 以下是 React 在 render 阶段的执行过程的详细步骤： 1. 触发渲染 更新请求：组件的状态或属性发生变化时，会触发一次渲染。更新可以由用户交互、网络请求响应或内部状态变化等引起。 调度更新：React 会将渲染任务调度到 Fiber 树的更新队列中。调度过程使用 React 的调度
说说Fiber的含义与数据结构
Posted on:2024年8月15日 at 19:08在 React 的 Fiber 架构中，“Fiber” 是一种表示组件及其状态的内部数据结构。它是对 React 组件的详细描述，旨在提高组件的渲染性能和用户体验。以下是 Fiber 的含义和数据结构的详细解释： 1. Fiber 的含义 Fiber 是一种内部数据结构：它用于表示每个 React 组件的状态和属性。每个 Fiber 对象包含有关组件的信息，如更新状态、子组件、位置信息等。 Fib
fiber 架构的工作原理？
Posted on:2024年8月15日 at 19:07React 中的 Fiber 架构是一种新的协调算法，旨在提高 React 的性能和用户体验。它通过引入新的数据结构和机制，使得 React 能够更高效地处理 UI 更新。以下是 Fiber 架构的工作原理： 1. Fiber 数据结构 Fiber 节点：Fiber 是一个表示组件的内部数据结构，每个 Fiber 节点对应一个 React 组件。它包含了组件的状态、更新信息和子组件的引用等。 Fi
React Reconciler 为何要采用 fiber 架构？
Posted on:2024年8月15日 at 19:04React Reconciler 采用 Fiber 架构主要是为了提升性能和用户体验。Fiber 是 React 16 引入的一种新的协调算法，它相对于旧版的 Reconciler 具备以下优势： 1. 增量渲染 旧版 Reconciler：一次性计算并更新整个 UI 树，可能会导致性能瓶颈，尤其是在大型应用中。 Fiber 架构：支持增量渲染，将渲染任务拆分为小的单元，分批执行。这样可以在长时间
怎么获取函数组件的实例？
Posted on:2024年8月15日 at 18:52在 React 中，函数组件没有实例，因此传统的 ref 机制（用于访问类组件实例的方法）不适用。不过，可以通过以下几种方式在函数组件中使用 ref 来访问 DOM 元素或函数组件的内部逻辑： 1. 访问 DOM 元素 对于函数组件中引用 DOM 元素，可以使用 useRef 来创建一个 ref，并将其绑定到 DOM 元素上： import React, { useRef, useEffect }
forwardRef 作用是什么？
Posted on:2024年8月15日 at 18:43forwardRef 是 React 的一个高阶组件（HOC），用于将父组件的 ref 转发到子组件的 DOM 节点或组件实例中。它使得父组件能够直接访问子组件的 DOM 元素或方法。这在一些情况下非常有用，比如需要在父组件中操作子组件的 DOM 元素或调用子组件的方法时。 使用场景 访问子组件的 DOM 节点： 当需要对子组件的 DOM 元素进行操作（例如，获取焦点、调整大小等），而这个子组件是
useState 是如何实现的？
Posted on:2024年8月15日 at 18:37useState 是 React 的一个 Hook，用于在函数组件中管理状态。它使函数组件能够拥有类似于类组件中的 this.state 和 this.setState 的功能。useState 的实现涉及到 React 的内部机制，包括状态管理、更新队列和组件的重新渲染。 下面是 useState 的实现原理： 1. 状态的初始化 当你调用 useState 时，可以传递一个初始状态值或一个函数
useEffect的第二个参数，是如何判断实现依赖是否发生变化的？
Posted on:2024年8月14日 at 23:27useEffect 的依赖数组的比较是通过浅比较（shallow comparison）实现的。 具体来说，以下是比较方法的细节： 1. 基础数据类型的比较 对于基本数据类型（如 string、number、boolean），React 直接比较它们的值： 相等：value1 === value2。如果两个基本数据类型的值相等，React 认为它们没有变化。 不相等：如果值不相等，则认为依赖项发生
React中，useRef、ref、forwardsRef 的区别是什么?
Posted on:2024年8月14日 at 23:24useRef、ref 和 forwardRef 都涉及到引用（refs）的使用，但它们的用途和行为有所不同。下面是它们的主要区别： 1. useRef 用途：在函数组件中创建和管理引用。useRef 返回一个可变的 ref 对象，该对象的 .current 属性可以用来访问 DOM 节点或保存任意值。 使用方式： import { useRef, useEffect } from 'react';
React Router 中，HashRouter 和 BrowserRouter 的区别和原理？
Posted on:2024年8月14日 at 20:07React Router 是一个用于处理 React 应用中的路由的库，其中 HashRouter 和 BrowserRouter 是两种主要的路由器组件。它们的主要区别在于路由的实现方式和 URL 的处理方式。下面是它们的区别和原理： 1. HashRouter 原理 哈希路由：HashRouter 使用 URL 的哈希（#）部分来保持和同步路由信息。哈希路由器将路由信息附加在 URL 的 #
redux-thunk 和 redux 是什么关系？
Posted on:2024年8月14日 at 19:53redux-thunk 是一个 Redux 中间件，用于处理异步操作和复杂的逻辑。它与 Redux 关系密切，但有不同的功能和作用。下面是它们之间的关系和作用： 1. Redux 的基本概念 Redux：一个状态管理库，用于管理 JavaScript 应用的状态。Redux 采用单一的全局状态树，状态通过 Reducers 进行管理和更新，状态的变更通过 Action 和 Dispatch 来触发
taro 的实现原理是怎么样的？
Posted on:2024年8月10日 at 22:24Taro 是一个多端统一开发框架，可以使用一套代码编译成微信小程序、支付宝小程序、百度智能小程序、字节跳动小程序、QQ 小程序、快应用、H5 等多个平台的应用。 Taro 的实现原理主要基于以下几个方面： JSX 转换：Taro 使用 Babel 插件将类似 HTML 的语法转换为 React 组件。在编译过程中，Taro 还会对 JSX 语法进行优化和压缩，以避免生成不必要的代码。 多端适配：T
说说你对 useReducer 的理解
Posted on:2024年8月10日 at 22:06useReducer 是 React Hooks 中的一个函数，用于管理和更新组件的状态。它可以被视为 useState 的一种替代方案，适用于处理更复杂的状态逻辑。 使用 useReducer，我们首先需要定义一个 reducer 函数，该函数接收当前状态（state）和动作（action）作为参数，并返回新的状态。在组件中，可以通过调用 useReducer 来创建一个状态值以及与之配套的派发
使用 React hooks 怎么实现类里面的所有生命周期？
Posted on:2024年8月10日 at 21:50在 React 16.8 之前，函数组件也称为无状态组件，因为函数组件也不能访问 react 生命周期，也没有自己的状态。react 自 16.8 开始，引入了 Hooks 概念，使得函数组件中也可以拥有自己的状态，并且可以模拟对应的生命周期。 我们应该在什么时候使用 Hooks 呢？ 官方并不建议我们把原有的 class 组件，大规模重构成 Hooks，而是有一个渐进过程: 首先，原有的函数组件
useMemo 和 useCallback 有什么区别？
Posted on:2024年8月10日 at 21:47在 React 中，useMemo 和 useCallback 都是用来优化性能的钩子函数，但它们的用途和作用稍有不同。 useMemo: useMemo 的主要作用是在组件重新渲染时，用来缓存计算结果，以避免不必要的重复计算。它接收两个参数：一个回调函数和一个依赖数组。回调函数用于进行计算，而依赖数组用于指定在数组中列出的依赖项发生变化时，才重新计算并返回新的值，否则会返回上一次缓存的值。 c
React 中为什么不直接使用 requestIdleCallback？
Posted on:2024年8月10日 at 21:06在React中，使用requestIdleCallback直接可能会导致一些问题，因此React并没有直接采用这个API。requestIdleCallback是一个浏览器提供的API，用于在浏览器空闲时执行任务，但在React中，有一些特殊的考虑： 一致性问题： requestIdleCallback的执行时机不是完全可控的，这可能导致在不同环境中表现不一致。React希望提供一致的行为，以确保
mobx 和 redux 有什么区别？
Posted on:2024年8月10日 at 19:53共同点 为了解决状态管理混乱、无法有效同步的问题，统一维护管理应用状态 某一状态只有一个可信数据来源（通常命名为store，指状态容器） 操作更新状态方式统一，并且可控（通常以action方式提供更新状态的途径） 支持将store与React组件连接，如react-redux，mobx-react 区别 Redux更多的是遵循Flux模式的一种实现，是一个 JavaScript 库，它关注点主要是
使用 redux 有哪些原则？
Posted on:2024年8月10日 at 19:52核心描述 单一数据源：整个应用的全局 state 被存储在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。 State 是只读的：唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事情的普通对象。 使用纯函数来执行修改：为了描述 action 如何改变 state tree，你需要编写纯的 reducers。
为什么 useState 返回的是数组而不是对象？
Posted on:2024年8月10日 at 19:51useState 的用法： const [count, setCount] = useState(0) 可以看到 useState 返回的是一个数组，那么为什么是返回数组而不是返回对象呢？ 要回答这个问题得弄明白 ES6 的解构赋值(destructring assignment)语法 , 来看 2 个简单的示例： 数组的解构赋值： const foo = ['one', 'two', 'thre
单页应用如何提高加载速度？
Posted on:2024年8月10日 at 19:41为了提高网页性能，可以采取以下优化措施： 代码分割：将代码拆分为小块，按需加载，减少加载时间。 缓存资源：利用浏览器缓存重复使用的文件，如CSS、JS、图片等。 预加载关键资源：提前加载首页所需的关键资源，如JS、CSS或数据。 图片格式优化：选择合适的图片格式，压缩文件大小，使用字体文件代替小图标。 Gzip压缩：使用Gzip压缩减少文件大小，提高传输效率。 CDN使用：通过CDN缓存和传递文件
为什么 react 需要 fiber 架构，而 Vue 却不需要？
Posted on:2024年8月10日 at 17:07React引入Fiber架构的主要原因是为了实现更好的异步渲染和更高效的任务调度。Fiber架构使得React能够更细粒度地控制和中断渲染过程，以便更好地响应用户交互、实现懒加载等功能。Vue在设计上采用了不同的策略，因此并不需要类似于Fiber的架构。 以下是一些原因解释为什么React选择了Fiber架构，而Vue没有类似的架构： 异步渲染和任务优先级： React的Fiber架构使得实现异步
React 和 Vue 在技术层面有哪些区别？
Posted on:2024年8月10日 at 17:07React 和 Vue 是当前比较流行的前端框架，它们在技术层面有以下区别： 组件化方式不同：React 是基于组件实现的，组件包含了状态和行为，所有组件共享一个状态树。Vue 也是基于组件实现的，但是每个组件都有自己的状态，并且可以很容易地将数据和行为绑定在一起。 数据驱动方式不同：React 使用单向数据流来管理数据，即从父组件到子组件的传递，所以 React 中组件之间的数据交互相对更加复杂
react 中怎么捕获异常？
Posted on:2024年8月10日 at 17:07ErrorBoundary EerrorBoundary 是16版本出来的，之前的 15 版本有unstable_handleError。 关于 ErrorBoundary 官网介绍比较详细，它能捕捉以下异常： 子组件的渲染 生命周期函数 构造函数 class ErrorBoundary extends React.Component { constructor(props) { super(pr
React.memo() 和 useMemo() 的用法是什么，有哪些区别？
Posted on:2024年8月10日 at 17:07在软件开发中，我们通常痴迷于性能提升以及如何使我们的应用程序执行得更快，从而为用户提供更好的体验。 Memoization 是优化性能的方法之一。 在本文中，我们将探讨它在 React 中的工作原理。 什么是 memoization？ 在解释这个概念之前，让我们先来看一个简单的斐波那契程序： function fibonacci(n){ return (n < 2) ? n : fibonacci
React18新特性
Posted on:2024年8月10日 at 17:07React 团队在 2022 年 3 月 29 日正式发布了 React 的第 18 个版本。 我将在这篇文章里简单介绍 React 18 的新特性，React Concurrent Mode（并发模式）的实现，以及简要的升级指南。 New Features Automatic Batching 早在 React 18 之前，React 就已经可以对 state 更新进行批处理了： functio
我们应该在什么场景下使用 useMemo 和 useCallback ？
Posted on:2024年8月10日 at 17:06前言 useMemo 和 useCallback 是 React 的内置 Hook，通常作为优化性能的手段被使用。他们可以用来缓存函数、组件、变量，以避免两次渲染间的重复计算。但是实践过程中，他们经常被过度使用：担心性能的开发者给每个组件、函数、变量、计算过程都套上了 memo，以至于它们在代码里好像失控了一样，无处不在。 本文希望通过分析 useMemo/useCallback 的目的、方式、成
说说你对 dangerouslySetInnerHTML 的理解
Posted on:2024年8月10日 at 17:06本文介绍了在React应用程序中使用dangerouslySetInnerHTML 属性的原因，它相当于浏览器DOM中的innerHTML 属性。 什么是dangerouslySetInnerHTML ？ dangerouslySetInnerHTML 是一个属性，你可以在 React 应用程序中的 HTML 元素上使用，以编程方式设置其内容。你可以直接在元素上使用这个属性，而不是使用选择器来抓取
react是否支持给标签设置自定义的属性，比如给video标签设置webkit-playsinline？
Posted on:2024年8月10日 at 17:06如果你在react中这么样写： // Your code: <div mycustomattribute="something" /> 在react 15中将被渲染成： // React 15 output: <div /> 在react 16及之后的版本中将被渲染成： // React 16 output: <div mycustomattribute="something" /> 但这个会有限
如何让 useEffect 支持 async/await？
Posted on:2024年8月10日 at 17:06大家在使用 useEffect 的时候，假如回调函数中使用 async...await... 的时候，会报错如下。 看报错，我们知道 effect function 应该返回一个销毁函数（return返回的 cleanup 函数），如果 useEffect 第一个参数传入 async，返回值则变成了 Promise，会导致 react 在调用销毁函数的时候报错**。 React 为什么要这么做？
说说你对 useMemo 的理解
Posted on:2024年8月10日 at 17:06Memo 在class的时代，我们一般是通过pureComponent来对数据进行一次浅比较，引入Hook特性后，我们可以使用Memo进行性能提升。 在此之前，我们来做一个实验 import React, { useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; function App(
说说你对自定义hook的理解
Posted on:2024年8月10日 at 17:06自定义Hook 通过自定义 Hook，可以将组件逻辑提取到可重用的函数中。 可以理解成Hook就是用来放一些重复代码的函数。 下面我将做手动实现一个列表渲染、删除的组件，然后把它做成自定义Hook。 示例 定义数据列表 const initialState = [ { id: 1, name: "qiu" }, { id: 2, name: "yan" }, { id: 2, name: "xi"
说说你对 useContext 的理解
Posted on:2024年8月10日 at 17:06什么是Context context（上下文）可以看成是扩大版的props，它可以将全局的数据通过provider接口传递value给局部的组件，让包围在provider中的局部组件可以获取到全局数据的读写接口 全局变量可以看成是全局的上下文 而上下文则是局部的全局变量，因为只有包围在provider中的局部组件才可以获取到这些全局变量的读写接口 用法 创建context 设置provider并通
为什么不能在循环、条件或嵌套函数中调用 Hooks？
Posted on:2024年8月10日 at 17:06如果在条件语句中使用hooks，React会抛出 error。 这与React Hooks的底层设计的数据结构相关，先抛出结论：react用链表来严格保证hooks的顺序。 一个典型的useState使用场景： const [name,setName] = useState('leo'); ...... setName('Lily'); 那么hooks在这两条语句分别作了什么？ 上图是 useSt
说说React事件和原生事件的执行顺序
Posted on:2024年8月10日 at 17:06我们知道，React在内部对事件做了统一的处理，合成事件是一个比较大的概念 为什么要有合成事件 在传统的事件里，不同的浏览器需要兼容不同的写法，在合成事件中React提供统一的事件对象，抹平了浏览器的兼容性差异 React通过顶层监听的形式，通过事件委托的方式来统一管理所有的事件，可以在事件上区分事件优先级，优化用户体验 React在合成事件上对于16版本和17版本的合成事件有很大不同，我们也会简
react 和 vue 有什么区别？
Posted on:2024年8月10日 at 17:06前言 React 是由Facebook创建的JavaScript UI框架，React推广了 Virtual DOM( 虚拟 DOM )并创造了 JSX 语法。JSX 语法的出现允许我们在 javascript 中书写 HTML 代码。 VUE 是由尤雨溪开发的，VUE 使用了模板系统而不是JSX，因其实模板系统都是用的普通的 HTML，所以对应用的升级更方便、更容易，而不需要整体重构。 VUE
Redux 状态管理器和变量挂载到 window 中有什么区别？
Posted on:2024年8月10日 at 17:06Redux 状态管理器和将变量挂载到 window 对象上是两种不同的状态管理方法，它们各有优缺点。 Redux 状态管理器 优点： 集中管理：所有的状态都存储在 Redux store 中，方便管理和调试。 可预测性：状态变化是通过纯函数（reducers）和明确的 actions 来处理，使得状态变化可预测。 中间件支持：Redux 支持中间件，比如 redux-thunk 或 redux-s
说说React Router有几种模式，以及实现原理？
Posted on:2024年8月10日 at 17:05一、是什么 在单页应用中，一个web项目只有一个html页面，一旦页面加载完成之后，就不用因为用户的操作而进行页面的重新加载或者跳转，其特性如下： 改变 url 且不让浏览器向服务器发送请求 在不刷新页面的前提下动态改变浏览器地址栏中的URL地址 其中主要分成了两种模式： hash 模式：在url后面加上#，如http://127.0.0.1:5500/home/#/page1 history 模
说说你对React Router的理解？常用的Router组件有哪些？
Posted on:2024年8月10日 at 17:05一、是什么 react-router等前端路由的原理大致相同，可以实现无刷新的条件下切换显示不同的页面 路由的本质就是页面的URL发生改变时，页面的显示结果可以根据URL的变化而变化，但是页面不会刷新 因此，可以通过前端路由可以实现单页(SPA)应用 react-router主要分成了几个不同的包： react-router: 实现了路由的核心功能 react-router-dom： 基于 rea
你在React项目中是如何使用Redux的? 项目结构是如何划分的？
Posted on:2024年8月10日 at 17:05一、背景 redux是用于数据状态管理，而react是一个视图层面的库 如果将两者连接在一起，可以使用官方推荐react-redux库，其具有高效且灵活的特性 react-redux将组件分成： 容器组件：存在逻辑处理 UI 组件：只负责现显示和交互，内部不处理逻辑，状态由外部控制 通过redux将整个应用状态存储到store中，组件可以派发dispatch行为action给store 其他组件通
说说对Redux中间件的理解？常用的中间件有哪些？实现原理？
Posted on:2024年8月10日 at 17:05一、是什么 中间件（Middleware）是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务（功能），衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的 在上篇文章中，了解到了Redux整个工作流程，当action发出之后，reducer立即算出state，整个过程是一个同步的操作 那么如果需要支持异步操作，或者支持错误处理、日志监控，这个过程就可以用上
说说你对Redux的理解？其工作原理？
Posted on:2024年8月10日 at 17:05一、是什么 React是用于构建用户界面的，帮助我们解决渲染DOM的过程 而在整个应用中会存在很多个组件，每个组件的state是由自身进行管理，包括组件定义自身的state、组件之间的通信通过props传递、使用Context实现数据共享 如果让每个组件都存储自身相关的状态，理论上来讲不会影响应用的运行，但在开发及后续维护阶段，我们将花费大量精力去查询状态的变化过程 这种情况下，如果将所有的状态进
在react中怎么实现组件间的过渡动画？
Posted on:2024年8月10日 at 17:05一、是什么 在日常开发中，页面切换时的转场动画是比较基础的一个场景 当一个组件在显示与消失过程中存在过渡动画，可以很好的增加用户的体验 在react中实现过渡动画效果会有很多种选择，如react-transition-group，react-motion，Animated，以及原生的CSS都能完成切换动画 二、如何实现 在react中，react-transition-group是一种很好的解决方
React构建组件的方式有哪些？有什么区别？
Posted on:2024年8月10日 at 17:05一、是什么 组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式 在React中，一个类、一个函数都可以视为一个组件 组件所存在的优势： 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现 调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据
state 和 props有什么区别？
Posted on:2024年8月10日 at 17:05一、state 一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是state，一般在 constructor 中初始化 当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用，并且重新调用组件render方法，如下面的例子： class Button extends React.Component { constructor() { super()
说说你对immutable的理解？如何应用在react项目中？
Posted on:2024年8月10日 at 17:05一、是什么 Immutable，不可改变的，在计算机中，即指一旦创建，就不能再被更改的数据 对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象 Immutable 实现的原理是 Persistent Data Structure（持久化数据结构）: 用一种数据结构来保存数据 当数据被修改时，会返回一个对象，但是新的对象会尽可能的利用之前的数据结构而不会对
说说react中引入css的方式有哪几种？区别？
Posted on:2024年8月10日 at 17:05一、是什么 组件式开发选择合适的css解决方案尤为重要 通常会遵循以下规则： 可以编写局部css，不会随意污染其他组件内的原生； 可以编写动态的css，可以获取当前组件的一些状态，根据状态的变化生成不同的css样式； 支持所有的css特性：伪类、动画、媒体查询等； 编写起来简洁方便、最好符合一贯的css风格特点 在这一方面，vue使用css起来更为简洁： 通过 style 标签编写样式 scope
说说React服务端渲染怎么做？原理是什么？
Posted on:2024年8月10日 at 17:05一、是什么 服务端渲染（Server-Side Rendering ，简称SSR），指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程 其解决的问题主要有两个： SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面 加速首屏加载，解决首屏白屏问题 二、如何做 在react中，实现SSR主要有两种形式： 手动搭建一个 SSR
说说你在React项目是如何捕获错误的？
Posted on:2024年8月10日 at 17:05一、是什么 错误在我们日常编写代码是非常常见的 举个例子，在react项目中去编写组件内JavaScript代码错误会导致 React 的内部状态被破坏，导致整个应用崩溃，这是不应该出现的现象 作为一个框架，react也有自身对于错误的处理的解决方案 二、如何做 为了解决出现的错误导致整个应用崩溃的问题，react16引用了错误边界新的概念 错误边界是一种 React 组件，这种组件可以捕获发生在
说说React Jsx转换成真实DOM过程？
Posted on:2024年8月10日 at 17:05一、是什么 react通过将组件编写的JSX映射到屏幕，以及组件中的状态发生了变化之后 React会将这些「变化」更新到屏幕上 在前面文章了解中，JSX通过babel最终转化成React.createElement这种形式，例如： <div> <img src="avatar.png" className="profile" /> <Hello /> </div> 会被babel转化成如下： Re
react中懒加载的实现原理是什么？
Posted on:2024年8月10日 at 17:05随着前端应用体积的扩大，资源加载的优化是我们必须要面对的问题，动态代码加载就是其中的一个方案，webpack 提供了符合 ECMAScript 提案 的 import() 语法 ，让我们来实现动态地加载模块（注：require.ensure 与 import() 均为 webpack 提供的代码动态加载方案，在 webpack 2.x 中，require.ensure 已被 import 取代）。
React中的路由懒加载是什么？原理是什么？
Posted on:2024年8月10日 at 17:05React.lazy 是什么 随着前端应用体积的扩大，资源加载的优化是我们必须要面对的问题，动态代码加载就是其中的一个方案。 webpack 提供了符合 ECMAScript 提案 的 import() 语法 ，让我们来实现动态地加载模块（注：require.ensure 与 import() 均为 webpack 提供的代码动态加载方案，在 webpack 2.x 中，require.ensur
React有哪些性能优化的方法？
Posted on:2024年8月10日 at 17:05React 渲染性能优化的三个方向，其实也适用于其他软件开发领域，这三个方向分别是: 减少计算的量。 -> 对应到 React 中就是减少渲染的节点 或者 降低组件渲染的复杂度 利用缓存。-> 对应到 React 中就是如何避免重新渲染，利用函数式编程的 memo 方式来避免组件重新渲染 精确重新计算的范围。 对应到 React 中就是绑定组件和状态关系, 精确判断更新的'时机'和'范围'. 只重
React Fiber 是如何实现更新过程可控？
Posted on:2024年8月10日 at 17:05更新过程的可控主要体现在下面几个方面： 任务拆分 任务挂起、恢复、终止 任务具备优先级 任务拆分 在 React Fiber 机制中，它采用"化整为零"的思想，将调和阶段（Reconciler）递归遍历 VDOM 这个大任务分成若干小任务，每个任务只负责一个节点的处理。 任务挂起、恢复、终止 workInProgress tree workInProgress 代表当前正在执行更新的 Fiber
不同版本的 React 都做过哪些优化？
Posted on:2024年8月10日 at 17:05React渲染页面的两个阶段： 调度阶段（reconciliation）：在这个阶段 React 会更新数据生成新的 Virtual DOM，然后通过Diff算法，快速找出需要更新的元素，放到更新队列中去，得到新的更新队列。 渲染阶段（commit）：这个阶段 React 会遍历更新队列，将其所有的变更一次性更新到DOM上。 React 15 架构 React15架构可以分为两层： Reconci
Fiber 为什么是 React 性能的一个飞跃？
Posted on:2024年8月10日 at 17:05什么是 Fiber Fiber 的英文含义是“纤维”，它是比线程（Thread）更细的线，比线程（Thread）控制得更精密的执行模型。在广义计算机科学概念中，Fiber 又是一种协作的（Cooperative）编程模型（协程），帮助开发者用一种【既模块化又协作化】的方式来编排代码。 在 React 中，Fiber 就是 React 16 实现的一套新的更新机制，让 React 的更新过程变得可控
React Hooks当中的useEffect是如何区分生命周期钩子的
Posted on:2024年8月10日 at 17:05useEffect可以看成是 componentDidMount，componentDidUpdate 和 componentWillUnmount 三者的结合。 useEffect(callback, [source])接收两个参数，调用方式如下： useEffect(() => { console.log('mounted'); return () => { console.log('will
列举几个常见的 Hook?
Posted on:2024年8月10日 at 17:05在 React 中，Hooks 是一组可以让函数组件拥有状态和副作用的 API。 以下是一些常见的 Hook 及其用途： 1. useState 用途：在函数组件中添加状态。 示例：import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return (
在 React 中可以做哪些性能优化？
Posted on:2024年8月10日 at 17:05使用 shouldComponentUpdate 避免不需要的渲染，但是如果对 props 和 state 做深比较，代价很大，所以需要根据业务进行些取舍；在有子组件的情况下，为了避免子组件的重复渲染，可以通过父组件来判断子组件是否需要 PureRender。 将 props 设置为数组或对象：每次调用 React 组件都会创建新组件，就算传入的数组或对象的值没有改变，他们的引用地址也会发生改变
React Hooks带来了什么便利？
Posted on:2024年8月10日 at 17:05React Hooks 带来了许多便利，使得函数组件的开发更加简洁和高效。以下是主要的便利点： 1. 简化状态管理 useState：允许在函数组件中管理状态，避免了类组件中复杂的状态初始化和方法绑定。const [count, setCount] = useState(0); 2. 简化副作用处理 useEffect：统一了副作用的处理，替代了 componentDidMount、compone
React中的VM 一定会提高性能吗？
Posted on:2024年8月10日 at 17:05不一定，因为 VM 只是通过 diff 算法避免了一些不需要变更的 DOM 操作，最终还是要操作 DOM 的，并且 diff 的过程也是有成本的。 对于某些场景，比如都是需要变更 DOM 的操作，因为 VM 还会有额外的 diff 算法的成本在里面，所以 VM 的方式并不会提高性能，甚至比原生 DOM 要慢。 但是正如尤大大说的，这是一个性能 vs 可维护性的取舍。 框架的意义在于为你掩盖底层的
react 的虚拟dom是怎么实现的？
Posted on:2024年8月10日 at 17:05React 的虚拟 DOM 是一种在内存中表示 DOM 结构的机制，用于优化实际 DOM 的操作。它通过减少直接 DOM 操作的次数和复杂度，提高了性能。以下是虚拟 DOM 的实现原理和关键步骤： 1. 虚拟 DOM 的基本概念 虚拟 DOM：是一个轻量级的 JavaScript 对象，表示实际 DOM 树的结构和内容。虚拟 DOM 的主要目的是提供一种高效的方式来更新和渲染 UI。 React
React 中的 ref 有什么用？
Posted on:2024年8月10日 at 17:05使用 refs 获取。组件被调用时会新建一个该组件的实例。refs 会指向这个实例，可以是一个回调函数，回调函数会在组件被挂载后立即执行。 如果把 refs 放到原生 DOM 组件的 input 中，我们就可以通过 refs 得到 DOM 节点；如果把 refs 放到 React 组件中，那么我们获得的就是组件的实例，因此就可以调用实例的方法（如果想访问该组件的真实 DOM，那么可以用 React
在 shouldComponentUpdate 或 componentWillUpdate 中使用 setState 会发生什么？
Posted on:2024年8月10日 at 17:05当调用 setState 的时候，实际上会将新的 state 合并到状态更新队列中，并对 partialState 以及 _pendingStateQueue 更新队列进行合并操作。最终通过 enqueueUpdate 执行 state 更新。 如果在 shouldComponentUpdate 或 componentWillUpdate 中使用 setState，会使得 state 队列（_pe
setState 是同步，还是异步的？
Posted on:2024年8月10日 at 17:05PS: 2022年10月更新答案 react18之前。 setState在不同情况下可以表现为异步或同步。 在Promise的状态更新、js原生事件、setTimeout、setInterval..中是同步的。 在react的合成事件中，是异步的。 react18之后。 setState都会表现为异步（即批处理）。官方详细说明。 react18之前版本的解释 在React中，如果是由React引发
setState 之后发生了什么
Posted on:2024年8月10日 at 17:05简单版本： React 利用状态队列机制实现了 setState 的“异步”更新，避免频繁的重复更新 state。 首先将新的 state 合并到状态更新队列中，然后根据更新队列和 shouldComponentUpdate 的状态来判断是否需要更新组件。 复杂版本： enqueueSetState 将 state 放入队列中，并调用 enqueueUpdate 处理要更新的 Component
React 组件间怎么进行通信？
Posted on:2024年8月10日 at 17:05一、是什么 我们将组件间通信可以拆分为两个词： 组件 通信 React的组件灵活多样，按照不同的方式可以分成很多类型的组件 而通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的，广义上，任何信息的交通都是通信 组件间通信即指组件通过某种方式来传递信息以达到某个目的 二、如何通信 组件传递的方式有很多种，根据传送者和接收者可以分为如下： 父组件向子组件传递 子组件向父组件传递 兄
React 的事件代理机制和原生事件绑定有什么区别？
Posted on:2024年8月10日 at 17:05事件传播与阻止事件的传播： React 的合成事件并没有实现事件捕获 只支持了事件冒泡。阻止事件传播 React 做了兼容性处理，只需要 e.preventDefault() 即可，原生存在兼容性问题。 事件类型：React 是 原生事件类型 的一个子集（React 只是实现了 DOM level3 的事件接口，有些事件 React 并没有实现，比如 window 的 resize 事件。）阻止
简述下 React 的事件代理机制？
Posted on:2024年8月10日 at 17:05React 并不会把所有的处理函数直接绑定在真实的节点上。而是把所有的事件绑定到结构的最外层，使用一个统一的事件监听器，这个事件监听器上维持了一个映射来保存所有组件内部的事件监听和处理函数。 当组件挂载或卸载时，只是在这个统一的事件监听器上插入或删除一些对象。 当事件发生时，首先被这个统一的事件监听器处理，然后在映射里找到真正的事件处理函数并调用。 这样做的优点是解决了兼容性问题，并且简化了事件处
简单介绍下React中的 diff 算法
Posted on:2024年8月10日 at 17:05diff 算法主要基于三个规律： DOM 节点的跨层级移动的操作特别少，可以忽略不计 拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构 对于同一层级的一组子节点，可以通过唯一的 id 进行区分 tree diff 因为上面的三个策略中的第一点， DOM 节点的跨级操作比较少，那么 diff 算法只会对相同层级的 DOM 节点进行比较。如果发现节点不存在 那么会
react-router 里的 <Link> 标签和 <a> 标签有什么区别？
Posted on:2024年8月10日 at 17:05对比 标签, Link 避免了不必要的重新渲染。 react-router是伴随着react框架出现的路由系统，它也是公认的一种优秀的路由解决方案。在使用react-router时候，我们常常会使用其自带的路径跳转组件Link,通过实现跳转； react-router 接管了其默认的链接跳转行为，与传统的页面跳转有区别的是，Link 的 “跳转” 行为只会触发相匹配的对应的页面内容更新，而不会刷新
React中，能否直接将 props 的值复制给 state？
Posted on:2024年8月10日 at 17:04应该避免这种写法： constructor(props) { super(props); // 不要这样做 this.state = { color: props.color }; } 因为这样做毫无必要（你可以直接使用 this.props.color），同时还产生了 bug（更新 prop 中的 color 时，并不会影响 state）。 只有在你刻意忽略 prop 更新的情况下使用。 此时，
简述下 React 的生命周期？每个生命周期都做了什么？
Posted on:2024年8月10日 at 17:04挂载 当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下： constructor() static getDerivedStateFromProps() render() componentDidMount() 更新 当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下： static getDerivedStateFromProps() sho
如何在React中应用样式？
Posted on:2024年8月10日 at 17:04将样式应用于React组件有三种方法。 外部样式表 在此方法中，你可以将外部样式表导入到组件使用类中。 但是你应该使用className而不是class来为React元素应用样式, 这里有一个例子。 import React from 'react'; import './App.css'; import { Header } from './header/header'; import { Fo
React Fiber是什么？
Posted on:2024年8月10日 at 17:04Fiber 出现的背景 首先要知道的是，JavaScript 引擎和页面渲染引擎两个线程是互斥的，当其中一个线程执行时，另一个线程只能挂起等待。 在这样的机制下，如果 JavaScript 线程长时间地占用了主线程，那么渲染层面的更新就不得不长时间地等待，界面长时间不更新，会导致页面响应度变差，用户可能会感觉到卡顿。 而这正是 React 15 的 Stack Reconciler 所面临的问题，
React.PureComponent 和 React.Component 有什么区别？
Posted on:2024年8月10日 at 17:04PureComponent 和 Component的区别是：Component需要手动实现 shouldComponentUpdate，而 PureComponent 通过浅对比默认实现了 shouldComponentUpdate 方法。 浅比较(shallowEqual)，即react源码中的一个函数，然后根据下面的方法进行是不是PureComponent的判断，帮我们做了本来应该我们在 sh
什么是JSX？
Posted on:2024年8月10日 at 17:04JSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖，也是react.js的使用基础。React在不使用JSX的情况下一样可以工作，然而使用JSX可以提高组件的可读性，因此推荐使用JSX。 class MyComponent extends React.Component { render() { let props = t
为什么不能直接使用 this.state 改变数据？
Posted on:2024年8月10日 at 17:04react中不能直接修改state，因为并不会重新触发render。 以如下方式更新状态，组件不会重新渲染。 //Wrong This.state.message =”Hello world”; 而是需要使用setState()方法，状态改变时，组件通过重新渲染做出响应。 //Correct This.setState({message: ‘Hello World’}); setState通过一个
constructor中super与props参数一起使用的目的是什么？
Posted on:2024年8月10日 at 17:04在调用方法之前，子类构造函数无法使用this引用super()。 在ES6中，在子类的constructor中必须先调用super才能引用this。 在constructor中可以使用this.props 使用props： class MyComponent extends React.Component { constructor(props) { super(props); console.l
什么是受控组件？
Posted on:2024年8月10日 at 17:04受控组件（Controlled Component）是指一个表单元素的值由 React 组件的状态（state）控制，而不是由 DOM 元素自身控制。也就是说，表单元素的值和状态都是由 React 组件的 state 进行管理的，表单元素的值由组件的 state 决定，并通过事件处理函数来更新 state。 受控组件的特点 状态管理： 由组件状态控制：受控组件的表单元素（如 <input>、<te
什么是高阶组件？
Posted on:2024年8月10日 at 17:04高阶组件（Higher-Order Component, HOC）是 React 中的一种设计模式，用于增强或修改组件的行为。它是一个接受组件作为参数并返回一个新组件的函数。高阶组件本质上是一个函数，它用于复用组件逻辑和功能，避免在多个组件中重复代码。 高阶组件的特点 函数式组件增强： 接受组件：高阶组件（HOC）是一个函数，接受一个组件作为参数。 返回新组件：它返回一个新的组件，这个新的组件通常
React中的类组件和函数组件之间有什么区别？
Posted on:2024年8月10日 at 17:04类组件（Class components） 无论是使用函数或是类来声明一个组件，它决不能修改它自己的 props。 所有 React 组件都必须是纯函数，并禁止修改其自身 props。 React是单项数据流，父组件改变了属性，那么子组件视图会更新。 属性 props是外界传递过来的，状态 state是组件本身的，状态可以在组件中任意修改 组件的属性和状态改变都会更新视图。 class Welco
说说React render方法的原理？在什么时候会被触发？
Posted on:2024年7月23日 at 10:26一、原理 首先，render函数在react中有两种形式： 在类组件中，指的是render方法： class Foo extends React.Component { render() { return <h1> Foo </h1>; } } 在函数组件中，指的是函数组件本身： function Foo() { return <h1> Foo </h1>; } 在render中，我们会编写jsx
说说对受控组件和非受控组件的理解，以及应用场景？
Posted on:2024年7月23日 at 10:25一、受控组件 受控组件，简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据 举个简单的例子： class TestComponent extends React.Component { constructor (props) { super(props); this.state = { username: 'lindaidai' }; } render () { return <input
Redux 中异步的请求怎么处理
Posted on:2024年7月23日 at 10:25一般的异步请求，可以在 componentDidmount 中直接进⾏请求，⽆须借助redux。 但是在⼀定规模的项⽬中,上述⽅法很难进⾏异步流的管理,通常情况下我们会借助redux的异步中间件进⾏异步处理。 redux异步流中间件其实有很多，当下主流的异步中间件有两种redux-thunk、redux-saga。 （1）使用react-thunk中间件 redux-thunk优点: 体积⼩: r
Redux 和 Vuex 有什么区别，它们有什么共同思想吗？
Posted on:2024年7月23日 at 10:24Redux 和 Vuex区别 相同点 state 共享数据 流程一致：定义全局state，触发，修改state 原理相似，通过全局注入store。 不同点 从实现原理上来说： Redux 使用的是不可变数据，而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修改 Redux 在检测数据变化的时候，是通过 diff 的方式比较差异的，而Vuex其实和Vu
Redux中的connect有什么作用？
Posted on:2024年7月23日 at 10:24connect负责连接React和Redux 获取state connect 通过 context获取 Provider 中的 store，通过 store.getState() 获取整个store tree 上所有state 包装原组件 将state和action通过props的方式传入到原组件内部 wrapWithConnect 返回—个 ReactComponent 对象 Connect，C
useEffect 与 useLayoutEffect 有什么区别？
Posted on:2024年7月23日 at 10:23共同点 运用效果： useEffect 与 useLayoutEffect 两者都是用于处理副作用，这些副作用包括改变 DOM、设置订阅、操作定时器等。在函数组件内部操作副作用是不被允许的，所以需要使用这两个函数去处理。 使用方式： useEffect 与 useLayoutEffect 两者底层的函数签名是完全一致的，都是调用的 mountEffectImpl方法，在使用上也没什么差异，基本可以
React 中怎么实现状态自动保存（KeepAlive）？
Posted on:2024年7月23日 at 10:22什么是状态保存？ 假设有下述场景： 移动端中，用户访问了一个列表页，上拉浏览列表页的过程中，随着滚动高度逐渐增加，数据也将采用触底分页加载的形式逐步增加，列表页浏览到某个位置，用户看到了感兴趣的项目，点击查看其详情，进入详情页，从详情页退回列表页时，需要停留在离开列表页时的浏览位置上 类似的数据或场景还有已填写但未提交的表单、管理系统中可切换和可关闭的功能标签等，这类数据随着用户交互逐渐变化或增长
下面函数组件的输出分别是什么？
Posted on:2024年7月23日 at 10:20下面是一个简单的函数组件，有两个按钮：“alert”、“add”。 如果先点击“alert”按钮，再点击一次“add”按钮，那么弹窗框中的值和页面中展示value分别是什么？ const FunctionComponent = () => { const [value, setValue] = useState(1) const log = () => { setTimeout(() => { a
react中，父子组件的生命周期执行顺序是怎么样的？
Posted on:2024年7月23日 at 10:19React的生命周期从广义上分为三个阶段：挂载、渲染、卸载，因此可以把React的生命周期分为两类：挂载卸载过程和更新过程。 一、挂载卸载过程 constructor，完成了React数据的初始化； componentWillMount，组件初始化数据后，但是还未渲染DOM前； componentDidMount，组件第一次渲染完成，此时dom节点已经生成； componentWillUnmoun
你常用的 React Hooks 有哪些？
Posted on:2024年7月23日 at 10:16React 提供了一系列的 Hooks，用于在函数组件中添加和管理状态、副作用等功能。 以下是一些常用的 React Hooks： useState：用于在函数组件中添加状态管理。 useEffect：用于处理副作用操作（如数据获取、订阅、事件监听等）。 useContext：用于在组件树中获取和使用共享的上下文。 useReducer：用于管理复杂状态逻辑的替代方案，类似于 Redux 的 re
讲讲 React.memo 和 JS 的 memorize 函数的区别
Posted on:2024年7月23日 at 10:14React.memo() 和 JS 的 memorize 函数都是用来对函数进行结果缓存，提高函数的性能表现。不过，它们之间还是有一些区别的： 适用范围不同：React.memo() 主要适用于优化 React 组件的性能表现，而 memorize 函数可以用于任何 JavaScript 函数的结果缓存。 实现方式不同：React.memo() 是一个 React 高阶组件（HOC），通过浅层比较
实现一个 useTimeout Hook
Posted on:2024年7月23日 at 09:54useTimeout 是可以在函数式组件中，处理 setTimeout 计时器函数 解决了什么问题？ 如果直接在函数式组件中使用 setTimeout ，会遇到以下问题： 多次调用setTimeout function App() { const [state, setState] = useState(1); setTimeout(() => { setState(state + 1); },
React 中，怎么实现父组件调用子组件中的方法？
Posted on:2024年7月23日 at 09:49要实现父组件调用子组件中的方法，需要通过以下步骤进行操作： 在子组件中，创建一个公开的方法。这可以通过在子组件类中定义一个方法或者使用 React Hooks 中的 useImperativeHandle 来实现。 如果是类组件，可以在子组件类中定义一个方法，并将其挂载到实例上。例如： class ChildComponent extends React.Component { childMet
说说对 React 中Element、Component、Node、Instance 四个概念的理解
Posted on:2024年7月23日 at 09:49在 React 中，Element、Component、Node、Instance 是四个重要的概念。 Element：Element 是 React 应用中最基本的构建块，它是一个普通的 JavaScript 对象，用来描述 UI 的一部分。Element 可以是原生的 DOM 元素，也可以是自定义的组件。它的作用是用来向 React 描述开发者想在页面上 render 什么内容。Element
怎么在代码中判断一个 React 组件是 class component 还是 function component？
Posted on:2024年7月23日 at 09:49可以使用JavaScript的typeof运算符和React的Component类来进行判断。 下面是一个示例的判断方法： function isClassComponent(component) { return ( typeof component === 'function' && !!component.prototype.isReactComponent ); } // 示例用法 con
taro 2.x 和 taro 3 最大区别是什么？
Posted on:2024年7月23日 at 09:48Taro 2.x 和 Taro 3 的最大区别可以总结为以下几个方面： 编译方式：Taro 2.x 使用 Gulp 构建工具进行编译，而 Taro 3 改为使用 Webpack 进行构建。这使得 Taro 3 在编译速度、可扩展性、构建配置等方面有了更好的表现。 React 版本升级：Taro 2.x 使用的是 React 16 版本，而 Taro 3 升级到了 React 17 版本。React
useRef / ref / forwardsRef 的区别是什么?
Posted on:2024年7月23日 at 09:48useRef 和 ref 都是 React 中用于操作 DOM 元素或自定义组件实例的工具，而 forwardRef 则是用于访问嵌套子组件中的 DOM 元素或自定义组件实例。 它们之间的区别如下： useRef 是一个 hook 函数，可以在函数组件中使用；ref 是一个对象属性，只能在类组件中使用。 useRef 返回一个可变的 ref 对象，可以在组件的整个生命周期内保持不变，也就是说不会因
如果在 useEffect 的第一个参数中 return 了一个函数，那么第二个参数分别传空数组和传依赖数组，该函数分别是在什么时候执行？
Posted on:2024年7月23日 at 09:47在 React 中，当 useEffect 第一个参数中返回一个函数时，这个函数会在组件卸载时执行。当传递空数组 [] 时，useEffect 只会在组件挂载和卸载时调用一次，因此返回的函数也只会在组件卸载时执行一次。 useEffect(() => { // 在挂载时执行 return () => { // 在卸载时执行 } }, []); 当传递依赖数组时，useEffect 会在组件挂载和依
useEffect 的第二个参数, 传空数组和传依赖数组有什么区别？
Posted on:2024年7月23日 at 09:47在 React 中，useEffect 是一个常用的 Hook，它用于处理组件生命周期中的副作用。 useEffect 接收两个参数，第一个是要执行的函数，第二个是依赖数组（可选）。 当传递空数组 [] 时，useEffect 只会在组件挂载和卸载时调用一次。这种情况下，useEffect 不会监听任何变量，并且不会对组件进行重新渲染。 useEffect(() => { // 只在挂载和卸载时执
怎么判断一个对象是否是 React 元素？
Posted on:2024年7月23日 at 09:47如果想要判断一个对象是否是 React 元素，可以使用 React.isValidElement() 方法进行判断。该方法接收一个参数，返回一个布尔值，用于表示指定的对象是否是 React 元素。 以下是一个示例代码： import React from 'react'; const MyComponent = () => { return <div>Hello, world!</div>; }
React Portals 有什么用？
Posted on:2024年7月22日 at 10:12React Portals 是 React 提供的一种机制，用于将子组件渲染到父组件 DOM 层次结构之外的位置。它在处理一些特殊情况下的 UI 布局或交互时非常有用。以下是一些使用 React Portals 的常见情况： 在模态框中使用： 当你需要在应用的根 DOM 结构之外显示模态框（对话框）时，React Portals 可以帮助你将模态框的内容渲染到根 DOM 之外的地方，而不影响布局。
react 和 react-dom 是什么关系？
Posted on:2024年7月22日 at 10:12react 和 react-dom 是 React 库的两个主要部分，它们分别负责处理不同的事务。它们之间的关系可以理解为： react： 这是 React 库的核心部分，包含了 React 的核心功能，如组件、状态、生命周期等。它提供了构建用户界面所需的基本构建块。当你编写 React 组件时，你实际上是在使用 react 包。 react-dom： 这是 React 专门为 DOM 环境提供的
React 为什么要废弃 componentWillMount、componentWillReceiveProps、componentWillUpdate 这三个生命周期钩子？它们有哪些问题呢？React 又是如何解决的呢？
Posted on:2024年7月22日 at 10:11React 在 16.3 版本中： 将 componentWillMount、componentWillReceiveProps、componentWillUpdate 三个生命周期钩子加上了 UNSAFE 前缀，变为 UNSAFE_componentWillMount、UNSAFE_componentWillReceiveProps 和 UNSAFE_componentWillUpdate。 并
子组件是一个 Portal，发生点击事件能冒泡到父组件吗？
Posted on:2024年7月22日 at 10:11React 的 Portal 通过 React 的 context 和事件冒泡的机制工作。 在理解这个问题之前，首先要了解一些基本知识： React Context：React 使用 context 来存储组件树的一些信息，比如事件处理程序。当组件使用 Portal 时，Portal 在 React 内部仍然保持在父组件树中，即使在 DOM 上渲染到其他地方。也就是说，Portal 的 conte
下面代码中，点击 “+3” 按钮后，age 的值是什么？
Posted on:2024年6月1日 at 10:17import { useState } from 'react'; export default function Counter() { const [age, setAge] = useState(42); function increment() { setAge(age + 1); } return ( <> <h1>Your age: {age}</h1> <button onClick
实现 useUpdate 方法，调用时强制组件重新渲染
Posted on:2023年5月2日 at 20:07可以利用 useReducer 每次调用 updateReducer 方法，来达到强制组件重新渲染的目的。 import { useReducer } from 'react'; const updateReducer = (num: number): number => (num + 1) % 1_000_000; export default function useUpdate(): ()
使用 useState （const [test, setTest] = useState([])）时，为什么连续调用 setTest({...test, newValue}) 会出现值的丢失？
Posted on:2023年3月26日 at 08:34useState是异步执行的，也就是执行 setTest 后，不会立即更新 test 的结果，多次调用时，出现了值覆盖的情况。 如果本次的状态更新依赖于上一次最近的状态更新，那么我们可以给 setTest 传递一个函数进去，函数的参数即为最后一次更新的状态的值： setTest(prevState => ([ ...prevState, newValue ]))
为什么不能用数组下标来作为react组件中的key？
Posted on:2021年7月4日 at 21:30react 使用diff算法，使用key来做同级比对。如果使用数组下标作为key，有以下情况： 在数组头部或中部插入或删除元素： 所有key对应的节点的值发生更改，进行重新渲染。造成性能损耗 而如果使用数组中唯一值来作为key：不管是在何处插入或删除节点，其他key对应的节点的值未发生更改，只需插入或删除操作的数组节点。
使用React Hooks有什么优势？
Posted on:2021年7月4日 at 21:30hooks 是react 16.8 引入的特性，他允许你在不写class的情况下操作state 和react的其他特性。 React Hooks 要解决的问题是状态共享，是继 render-props 和 higher-order components 之后的第三种状态共享方案，不会产生 JSX 嵌套地狱问题。 这个状态指的是状态逻辑，所以称为状态逻辑复用会更恰当，因为只共享数据处理逻辑，不会共享
为什么React的 VM 可以提高性能？
Posted on:2021年7月4日 at 21:30因为 VM 并不是真实的操作 DOM，通过 diff 算法可以避免一些不变要的 DOM 操作，从而提高了性能。
React中为什么要给组件设置 key？
Posted on:2021年7月4日 at 21:29在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。 在 React Diff 算法中React 会借助元素的 Key 值来判断该元素是新创建的还是被移动而来的元素，从而减少不必要的元素重新渲染。 此外，React 还需要借助 Key 值来判断元素与本地状态的关联关系。
React 的事件代理机制和原生事件绑定混用会有什么问题？
Posted on:2021年7月4日 at 21:29我们在平时的开发中应该尽可能的避免 React 的事件代理机制和原生事件绑定混用。 React 的合成事件层，并没有将事件直接绑定到 DOM 元素上，所以使用 e.stopPropagation() 来阻止原生 DOM 的冒泡的行为是不行的。阻止 React 事件冒泡的行为只能用于 React 合成事件系统，但是 在原生事件中的阻止冒泡行为，却可以阻止 React 合成事件的传播。
React 中如果绑定事件使用匿名函数有什么影响？
Posted on:2021年7月4日 at 21:29class Demo { render() { return <button onClick={(e) => { alert('我点击了按钮') }}> 按钮 </button> } } 这样的写法，因为使用的是匿名函数，所以组件每次都会认为是一个新的 props，不会使用缓存优化，在性能上会有一定的损耗。
什么是 React？
Posted on:2021年7月4日 at 19:25React是一个简单的javascript UI库，用于构建高效、快速的用户界面。 它是一个轻量级库，因此很受欢迎。它遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效。 它使用虚拟DOM来有效地操作DOM。 它遵循从高阶组件到低阶组件的单向数据流。
什么是虚拟DOM？
Posted on:2021年7月4日 at 19:24虚拟DOM（VDOM）它是真实DOM的内存表示,一种编程概念，一种模式。它会和真实的DOM同步，比如通过ReactDOM这种库，这个同步的过程叫做调和(reconcilation)。 虚拟DOM更多是一种模式，不是一种特定的技术。