分类 默认分类 下的文章

CodeEra

React 类组件中 this 的使用与 props 解构

React 类组件中 this 的使用与 props 解构在 React 类组件中，this 的使用以及 props 的解构方式取决于代码的组织结构和访问上下文。以下是详细的说明和示例。1. 在 render 方法中使用 this当需要访问类组件中的方法或属性时，必须使用 this。示例：class MyComponent extends React.Component { handleCli

CodeEra

ES6 中使用多种方法向数组中追加一个对象

在 ES6 中，你可以使用多种方法向数组中追加一个对象。以下是两种常见的写法：1. 使用原生方法 pushpush 是 JavaScript 原生的数组方法，用于向数组末尾添加一个或多个元素。const array = [{ id: 1, name: 'Alice' }]; const newObject = { id: 2, name: 'Bob' }; array.push(newObjec

CodeEra

React 样式的模块化 学习笔记

React 样式模块化学习笔记1. CSS ModulesCSS Modules 是一种将 CSS 文件模块化的技术，它可以确保样式只作用于特定的组件，避免全局污染。步骤：创建一个 .module.css 文件，例如 Button.module.css。在 React 组件中引入并使用该样式文件。示例：/* Button.module.css */ .button { background-c

CodeEra

React 中 DOM Diffing 算法

React 中 DOM Diffing 算法详解React 的 DOM Diffing 算法（也称为 Reconciliation 或 协调算法）是 React 高效更新 UI 的核心机制。它的作用是通过比较新旧虚拟 DOM 树的差异，计算出最小的 DOM 操作，从而提升性能。以下是 React 中 DOM Diffing 算法的详细说明，包括使用 index 作为 key 可能引发的问题。1.

CodeEra

React 生命周期钩子(新)

在 React 16.3 之后，React 引入了新的生命周期钩子，并对一些旧的生命周期钩子进行了废弃或重命名。新的生命周期钩子更加清晰和安全，同时也引入了 static getDerivedStateFromProps 和 getSnapshotBeforeUpdate 等新的钩子。以下是 React 新生命周期钩子的详细说明：1. 挂载阶段（Mounting）挂载阶段是指组件被创建并插入到 D