前端八股大全
结论：一个用函数包裹组件，一个向组件传递函数HOC 和 Render Props高阶组件（Higher-Order Components，HOC）和 Render Props 是 React 中用于组件复用和逻辑抽象的两种常见模式，它们有一些不同之处：1. 高阶组件（Higher-Order Components）：高阶组件是一个函数，接受一个组件作为参数，并返回一个新的增强版组件。高阶组件的作用是在不改变原组件的情况下，通过包裹（Wrapping）或者继承（Inheritance）等方式来增强组件的功能。高阶组件通常用于横切关注点（Cross-Cutting Concerns）的实现，...
在 React 中进行错误处理通常涉及两个方面：组件生命周期方法和错误边界（Error Boundaries）。1. 组件生命周期方法：在组件的生命周期方法中，你可以使用 componentDidCatch() 方法来捕获组件内部发生的 JavaScript 错误，并进行处理。这个方法在组件渲染期间、生命周期方法，或子组件的构造函数中发生的错误都会被捕获。class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: fa...
参考链接：React 函数式组件的性能优化参考链接：React性能优化总结参考链接：React组件设计之性能优化篇减少render次数React.memo缓存组件避免匿名函数，使用React.useCallback缓存函数PureComponentShouldComponentUpdate合理使用Context，只定义被大多数组件所共用的属性减少计算量React.useMemo 缓存值使用 Fragment 来避免添加额外的 DOM使用key合理使用css，性能上：CSS Module > CSS Classes > Inline Style防抖节流减少渲染量懒加载组件（Su...
当 React 将 JSX 转换为真实 DOM 时，它主要依赖于以下几个方法和机制：React.createElement()： JSX 元素会被 Babel 转译为对应的 React.createElement() 调用。这个函数创建了一个描述 DOM 结构的 JavaScript 对象，包含了元素的类型、属性和子元素等信息。例如：const element = <h1>Hello, world!</h1>;这个 JSX 会被转换为以下形式：const element = React.createElement('h1', null, 'Hello, world...
参考链接：这可能是最通俗的 React Fiber(时间分片) 打开方式React Fiber 是 React 的新的核心算法架构，用于实现协调更新和异步渲染。Fiber 架构是 React v16 中引入的重大变化，它的主要目标是解决 React 在大型应用中遇到的性能问题和用户体验问题。React Fiber 解决了以下几个问题：渲染阻塞：在旧的 React 架构中，当 React 应用执行更新时，会阻塞浏览器主线程，导致页面失去响应，用户体验下降。Fiber 架构通过将工作分割成可中断的小任务单元，使得 React 应用可以在更新过程中让出主线程，从而保证页面的流畅响应。优先级调度...
避免不必要的 render 是提高 React 应用性能的关键之一。以下是一些可以帮助避免不必要 render 的方法：使用 PureComponent 或 React.memo：使用 PureComponent 类组件或 React.memo 高阶组件可以帮助避免不必要的 render。这两者都实现了 shouldComponentUpdate 生命周期方法，通过进行浅比较来判断是否需要重新渲染组件。如果组件的 props 和 state 没有变化，就不会重新渲染组件。import React, { PureComponent } from 'react'; class MyComp...
什么是ImmutableImmutable（不可变性）是指对象创建后其内容不能被修改的特性。在编程中，Immutable 模式被广泛应用于函数式编程和一些现代编程框架中，如 React 和 Redux。理解 Immutable 的概念有助于编写更安全、更易于维护的代码。以下是对 Immutable 概念的理解：不可变性：在 Immutable 模式中，一旦创建了对象，它的内容就不能被修改。如果需要对对象进行修改，必须创建一个新的对象，而不是直接在原对象上进行操作。值的不变性：Immutable 不仅适用于对象的内容，还适用于对象的值。即使对象的值发生了变化，原对象本身也不会受到影响，而是...
React Router 有两种主要的路由模式：HashRouter 和 BrowserRouter。HashRouter：HashRouter 使用 URL 中的哈希（#）部分来管理路由，即路由信息保存在 URL 的哈希部分中，不会触发页面的重新加载。在浏览器不支持 HTML5 History API 的情况下，HashRouter 是一种常用的路由模式。实现原理是，通过监听 window.location.hash 的变化来切换路由，并通过 window.addEventListener('hashchange', callback) 来监听 URL 的变化。BrowserRoute...
React 的纯组件（Pure Component）是一种特殊类型的 React 组件，它可以帮助提高性能。纯组件是 React.Component 的子类，它们在 shouldComponentUpdate 方法中默认使用浅比较来判断是否需要重新渲染。当纯组件的 props 和 state 没有发生变化时，React 将跳过对该组件的重新渲染，从而节省了渲染的时间和性能开销。与普通的 React 组件相比，使用纯组件的好处是，无需手动实现 shouldComponentUpdate 方法来进行性能优化，React 会自动帮助我们处理这个问题。但是，需要注意的是，纯组件仅能够对基本数据类...
方式在 React 中使用 CSS 有几种常见的方式，具体取决于你的项目需求和个人偏好：普通的 CSS 文件引入：你可以直接在 React 组件中引入普通的 CSS 文件，然后在 JSX 中使用引入的样式类名。import './styles.css'; const MyComponent = () => { return <div className="my-style">Hello, World!</div>; };内联样式：你可以在 JSX 中直接使用内联样式，通过 style 属性传递样式对象。const style = {...
React Hooks 是 React 16.8 版本引入的一项重要特性，它解决了在函数式组件中复用状态逻辑、副作用等问题，并使函数式组件具有了类组件相似的功能。理解 React Hooks 的核心概念和解决的问题包括以下几点：解决状态逻辑复用问题：在 React 16.7 版本之前，函数式组件没有内部状态，无法直接使用 state、生命周期等功能。这导致了在函数式组件中复用状态逻辑的困难，通常需要使用高阶组件或渲染属性来解决。React Hooks 的出现使得函数式组件可以直接使用状态，并通过 useState Hook 来管理组件内部的状态，从而解决了状态逻辑复用的问题。解决副作用处...
参考链接：高阶组件高阶组件的特点高阶组件（Higher Order Component，HOC）是一种用于增强组件功能的模式，它接收一个组件作为参数，并返回一个新的组件。换句话说，高阶组件是一个函数，它接受一个组件作为输入，并返回一个新的组件作为输出。理解高阶组件的核心概念包括以下几点：接受组件作为参数：高阶组件接受一个组件作为参数，这意味着它可以接受任何类型的组件作为输入。返回新的组件：高阶组件返回一个新的组件，通常是通过组合原始组件和一些额外的功能来增强组件的功能。功能增强：高阶组件通常用于增强组件的功能，例如添加状态管理、数据获取、权限控制、样式装饰等。组件组合：高阶组件可以将多个...
参考链接：《深入理解react》之memo、forwardRef原理forwardRef 是 React 提供的一种特殊的高阶组件（Higher Order Component），用于在函数组件中向子组件传递 ref。在 React 中，函数组件默认不支持 ref 属性，这意味着无法直接通过 ref 属性获取函数组件的实例。但有时候我们希望能够在父组件中通过 ref 获取到子组件的实例，这时就可以使用 forwardRef。使用 forwardRef 可以在函数组件中传递 ref，使得父组件可以直接访问子组件的 DOM 元素或实例。以下是 forwardRef 的基本使用方法：impor...
受控组件和非受控组件在 React 中，受控组件（Controlled Components）和非受控组件（Uncontrolled Components）是两种不同的表单组件的处理方式。受控组件（Controlled Components）：受控组件是由 React 组件状态（state）来控制的表单元素。也就是说，表单元素的值（例如输入框的值、选择框的选中项等）是通过 React 组件的状态来管理和更新的。当用户与表单元素进行交互时，React 组件的状态会更新，并且表单元素的值也会相应地更新。通常，受控组件会使用 onChange 事件来监听用户输入的变化，并将变化后的值保存到组件...
语法：类组件使用 ES6 的类语法来定义组件，继承自 React.Component 或 React.PureComponent。函数组件是一个简单的 JavaScript 函数，接收 props 作为参数，并返回 React 元素作为输出。状态管理：类组件可以包含内部状态（通过 this.state 定义）和生命周期方法（例如 componentDidMount、render 等）。函数组件是无状态的，不包含内部状态或生命周期方法，只负责根据输入的 props 渲染 UI。性能：函数组件通常比类组件执行效率更高，因为函数组件没有实例化过程和额外的生命周期方法，只是执行简单的函数调用。类...
参考链接：2023 再谈 React 组件通信Props 和 Callback：这是 React 中最基本和常见的组件通信方式。父组件通过 props 将数据传递给子组件，子组件通过 props 接收数据，并且可以通过回调函数（callback）来向父组件传递数据。父组件可以将数据作为 props 的属性传递给子组件，子组件通过 this.props 访问这些属性。当子组件需要向父组件传递数据时，可以通过回调函数的方式，将数据作为参数传递给父组件中的函数，从而实现数据的传递。Context：Context 是 React 提供的一种跨组件通信的机制，可以在组件树中传递数据而不必一级一级手...
在 React 中，构建组件的方式主要有以下几种：函数式组件（Functional Components）：函数式组件是一种纯函数，接收 props 作为参数，并返回 React 元素作为输出。函数式组件通常是无状态的，不包含任何内部状态或生命周期方法，只负责根据输入的 props 渲染 UI。函数式组件使用函数声明来定义，语法简洁，易于理解和编写。import React from 'react'; const FunctionalComponent = (props) => { return <div>Hello, {props.name}!</div&...
参考链接：[[React 源码] React18 合成事件][1]React 的事件机制具有以下特点和优势：合成事件（SyntheticEvent）：React 的事件系统基于合成事件，它是对原生 DOM 事件的封装。合成事件提供了与原生事件相似的 API，但在不同浏览器和环境下表现一致。事件委托（Event Delegation）：React 使用事件委托的方式来处理事件，将事件处理函数绑定在顶层的 DOM 元素上。这样可以减少内存消耗和提高性能，特别是在处理大量子元素的情况下。性能优化：React 的事件系统采用了一些性能优化策略，例如事件委托和事件池管理。合成事件对象可以被复用，减...
参考链接：我对 React V16.4 生命周期的理解废弃 UNSAFE_componentWillMount 的原因有一个常见的问题，有人问为什么不在 UNSAFE_componentWillMount 中写 AJAX 获取数据的功能，他们的观点是，UNSAFE_componentWillMount 在 render 之前执行，早一点执行早得到结果。但是要知道，在 UNSAFE_componentWillMount 中发起 AJAX 请求，不管多快得到结果也赶不上首次 render，数据都是要在 render 后才能到达。而且 UNSAFE_componentWillMount 在服务...
在 React 中，组件的生命周期经历了多个不同的阶段，主要包括以下阶段：挂载阶段（Mounting）：constructor(): 构造函数，在组件被创建时调用，用于初始化状态和绑定方法。static getDerivedStateFromProps(): 静态方法，用于根据 props 更新 state。render(): 渲染方法，用于生成组件的虚拟 DOM。componentDidMount(): 组件挂载后调用，通常用于进行一次性的 DOM 操作、数据加载等操作。更新阶段（Updating）：static getDerivedStateFromProps(): 更新阶段也会触发...
参考链接：react+vue2+vue3 diff算法分析及比较原理分别是什么1. react-diff: 递增法移动节点：移动的节点称为α，将α对应的真实的DOM节点移动到，α在新列表中的前一个VNode对应的真实DOM的后面添加节点：在新列表中有全新的VNode节点，在旧列表中找不到的节点需要添加（通过find这个布尔值来查找）移除节点：当旧的节点不在新列表中时，我们就将其对应的DOM节点移除（通过key来查找确定是否删除）不足：从头到尾单边比较，容易增加比较次数2. vue2-diff: 双端比较DOM节点什么时候需要移动和如何移动，总结如下：头-头：不移动尾-尾：不移动头-尾: ...
路由配置问题： SPA 使用前端路由来控制页面导航，而不是通过传统的页面跳转。如果 Nginx 配置不正确，无法正确处理前端路由，就会导致部分页面无法访问，出现404错误。需要在 Nginx 的配置中设置对于前端路由的转发规则，确保所有页面 都被正确导向到入口文件（比如 index.html），由前端路由来处理。
权限控制在前端项目中通常涉及接口权限、路由权限、菜单权限和按钮权限等方面。下面我将详细说明每个方面的权限控制实现方法：接口权限控制在前端项目中，接口权限控制通常指的是根据用户角色或权限级别限制用户对特定接口的访问权限。以下是实现接口权限控制的一般步骤：后端接口权限设计： 后端根据业务需求设计接口权限，通常在接口的请求头或请求参数中携带用户的认证信息或角色信息。前端接口请求拦截： 前端通过axios等工具拦截所有接口请求，在请求发送前进行权限验证，验证通过后才发送请求，否则拒绝发送请求或者跳转到错误页面。处理请求结果： 在接收到接口的响应结果后，根据后端返回的状态码或响应数据进行相应的处理...
为什么用SSR优势：SEO优化： 由于搜索引擎爬虫在渲染页面时可以直接获取到HTML内容，因此能够更好地理解页面内容，有利于SEO优化。首屏加载性能： SSR能够提供更快的首屏加载速度，因为用户在接收到HTML内容后就可以开始渲染页面，而不需要等待JavaScript的下载和执行。更好的用户体验： 用户在等待JavaScript下载和执行的过程中可能会感到页面加载速度慢，使用SSR能够提供更好的用户体验，尤其是对于低网速或低性能设备的用户。有利于浏览器缓存： 由于SSR返回的是完整的HTML页面，可以更容易地利用浏览器缓存来提升页面加载速度。使用SSR会有什么问题服务器负载增加： SSR...
什么是虚拟dom虚拟 DOM（Virtual DOM）是一个 JavaScript 对象，它是对真实 DOM 的一种轻量级表示。虚拟 DOM 是由 React 框架引入的概念，后来被其他框架如 Vue、Angular 等广泛采用。虚拟 DOM 的存在有以下几个主要原因：性能优化：DOM 操作是相对昂贵的操作，频繁地进行 DOM 更新会导致性能下降。而虚拟 DOM 可以在内存中进行操作，通过批量更新真实 DOM，减少了对真实 DOM 的频繁操作，从而提升了性能。跨平台兼容性：虚拟 DOM 的概念使得前端框架可以在不同的平台上工作，因为底层的 DOM 操作被框架封装了起来，与平台无关。方便的...
O(n^3) 表示的是算法的时间复杂度，其中 n 表示输入数据的规模。在这里，n 表示树的深度或节点数量。在比较两棵树时，一种可能的假设是每个节点都需要与另一棵树中的每个节点进行比较。如果两棵树的深度都为 n，那么在最坏的情况下，比较操作的次数将达到 n^2，因为需要对两棵树的每个节点进行比较。此外，如果考虑到树的每个节点可能都需要递归比较其子节点，那么在最坏情况下，每个比较操作可能都需要 O(n) 的时间。因此，总的比较操作的时间复杂度将是 O(n^3)。简而言之，O(n^3) 表示的是一种在最坏情况下的估算，考虑了比较操作的数量和每次比较操作的时间复杂度。
将 reducer 设计成纯函数在 Redux 中有以下好处：1. 可预测性和可维护性： 纯函数保证了相同的输入会产生相同的输出，不会受外部状态的影响。这使得状态更新的行为更加可预测，易于理解和调试，有助于提高代码的可维护性。2. 可测试性： 纯函数易于测试，因为它们的行为仅取决于输入参数，不会对外部环境产生影响。这样可以更轻松地编写单元测试，验证 reducer 的行为是否符合预期。3. 无副作用： 纯函数不会修改外部状态或产生副作用，这使得状态更新的过程更加可控和安全。在 Redux 中，由于 reducer 是纯函数，因此 Redux 的状态更新过程不会引入意外的行为或造成系统的不...
Vuex 中的 mutation 和 Redux 中的 reducer 都是用来修改状态的纯函数，它们的设计初衷是为了保证状态的可预测性和可维护性，不应该包含异步操作。主要原因有以下几点：1. 纯函数特性：mutation 和 reducer 都必须是纯函数，即给定相同的输入，必须始终产生相同的输出，而且不应该有副作用。如果允许异步操作，会导致函数的执行结果不可预测，破坏了纯函数的特性。2. 单一数据源：Vuex 和 Redux 都遵循单一数据源的原则，即整个应用的状态都被存储在一个单一的对象中。如果允许在 mutation 或 reducer 中进行异步操作，可能会导致状态的不一致性，...
虚拟 DOM（Virtual DOM）和操作原生 DOM 相比，往往在性能上有一定的优势，但并不意味着在所有情况下都比原生 DOM 操作快。以下是我对这个问题的想法：1. 批量更新和高效更新：虚拟 DOM 可以通过批量更新来减少 DOM 操作次数，它会收集多次更新操作，然后一次性地将更新应用到实际的 DOM 上，减少了浏览器重排（reflow）和重绘（repaint）的次数，从而提高了性能。2. 跨平台兼容性：虚拟 DOM 是框架层面的抽象，能够跨平台使用，无论是在浏览器端还是在服务器端，都可以通过统一的接口进行 DOM 操作，这种灵活性和跨平台的特性使得虚拟 DOM 在一些需要同时支持...
class Example extends React.Component { constructor() { super(); this.state = { val: 0 }; } componentDidMount() { this.setState({val: this.state.val + 1}); console.log(this.state.val); // 第 1 次 log this.setState({val: this.state.val + 1}); console.lo...
原因： 在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说，而isBatchingUpdates默认是false，也就表示setState会同步更新this.state，但是，有一个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理过程setState不会同步更新this.state。什么情况下同步？：setTimeout等异步操...
没有更多了
最近评论