Intact

Appearance

项目结构 ​

markdown
一个传统的 React 项目结构包括如下部分：
|- node_modules
|- src
|- public (存放页面模板)
  |- index.html
|- package.json
  • React：核心框架，用于构建用户界面。
  • React-dom：负责将 React 组件渲染到 DOM 中，构建 Web 应用页面。
  • react-scripts：封装了打包命令，隐藏了 Webpack 等工具的配置细节，简化了开发流程。

修改脚手架配置 ​

使用 eject 命令 ​

eject 命令用于暴露 create-react-app 的配置，允许开发者自定义 Webpack、Babel 等工具的配置。

bash
yarn eject

使用 Less 替代 Sass ​

默认情况下，create-react-app 使用 Sass 作为样式预处理器。如果你想使用 Less，可以通过以下步骤进行替换：

bash
yarn add less less-loader@8
yarn remove sass-loader

Babel 配置 ​

babel-preset-env 用于将 ES6+ 和 React 语法转换为 ES5，以确保代码在旧版浏览器中也能正常运行。

React 基础知识 ​

React 的基础是 JavaScript，因此理解 JavaScript 的特性（如作用域、闭包、原型等）至关重要。以下是一些补充知识点：

React.createElement ​

  • React.createElement(el, props, ...children)：
    • 返回的对象即为虚拟 DOM（VDOM），也称为 JSX 对象或 JSX 元素。它本质上是通过 JavaScript 对象来描述需要生成的 DOM 结构。
    • 该对象包含 $$typeof、type、props、key、ref 等属性。props 中又包含 children 和普通 props，children 通过递归操作进行处理。
    • 第三个参数可以直接传递 VDOM 对象或 JSX 对象。

组件命名规范 ​

  • 组件使用 CamelCase 命名。

对象设置 ​

在 React 组件中，props 是只读的，原因是被冻结。以下是几种对象设置的方式：

  • 冻结：Object.freeze() / Object.isFrozen()，不能进行增删改操作，也不能使用 Object.defineProperty()。
  • 密封：Object.seal() / Object.isSealed()，可以修改值，但不能增加或删除属性。
  • 不可扩展：Object.preventExtensions() / Object.isExtensible()，不能增加新成员。

类组件中的 super(props) ​

在类组件中，构造函数中调用 super(props) 的原因如下：

  • Component 默认接收 props 并对 this 进行绑定。继承后，实例的 this 指向发生变化，指向类组件的实例。
  • Component 本身需要接收 props 并将其绑定到 this 上。如果不传递 props，Component 将无法获取 props 数据。

不安全方法 ​

使用 UNSAFE_xxx 可以手动指定该方法为不安全方法，从而去除控制台中的警告。

React 严格模式 ​

React.StrictMode 是 React 的严格模式，用于检验 React 语法的规范性。旧版组件库可能存在不规范的 React 语法，此时可以不使用严格模式。

浏览器渲染队列与 VDOM 初次渲染 ​

浏览器渲染队列与 VDOM 初次渲染类似，都是准备好之后一次性渲染。

render 方法 ​

render 方法只是将组件转换为真实 DOM，但还需要将其插入到浏览器中才能显示。

自定义 Hook 命名规则 ​

自定义 Hook 应使用 useXxx 命名，通过 JSX 解析时会有 Hook 相关的特性。注意，Hook 不能在循环或条件语句中使用。

模拟触摸事件 ​

为了去除移动端 300ms 的点击延迟，可以使用 fastclick 包或手势事件库。连续点击两下的行为如下：

  • PC 端：触发 2 次 click 和 1 次 doubleClick。
  • 移动端：在 300ms 内点击第二次时，只触发 doubleClick。

React 与 Vue 对比（MVC 与 MVVM） ​

React 和 Vue 都是数据驱动视图的框架，但它们的架构模式有所不同：

  • MVC（React）：Model-View-Controller 模式。
  • MVVM（Vue）：Model-View-ViewModel 模式。

Webpack 配置与 React 的关系 ​

通过 eject 命令暴露 Webpack 配置项后，可以重新配置 Webpack，修改默认端口、打包路径等操作。

兼容处理 ​

Webpack 配置可以用于处理兼容性问题，确保代码在不同浏览器中正常运行。

MVC 与 MVVM 的基本思想 ​

  • MVC：不直接操作 DOM，而是通过数据操作 DOM。React 是单向数据流，View 到 Model 的驱动需要手动实现。
  • MVVM：Vue 实现了双向数据绑定，视图内容改变时会自动映射到数据中。

React 的 MVC 结构 ​

  • Controller 层：通过 View 层进行人机交互。
  • View 层：基于 JSX 语法构建视图。
  • Model 层：根据需要动态变化的数据，建立相应的数据模型。

Vue 的 MVVM 结构 ​

  • ViewModel 层：Vue 的核心实现，实现了双向数据绑定。
  • View 层：通过 Template 语法实现。
  • Model 层：数据模型。

单向数据流与双向数据流 ​

  • React: 数据->视图
  • Vue: 数据<->视图

重绘与性能优化 ​

  • 引起重绘的原因：DOM 操作、样式变化等都会导致浏览器重绘，影响性能。
  • 避免重绘：通过虚拟 DOM 和批量更新机制，减少直接操作 DOM 的次数，从而避免不必要的重绘。

总结 ​

React 和 Vue 都是强大的前端框架，各有其优势和适用场景。理解它们的核心概念和架构模式，能够帮助开发者更好地选择和使用合适的工具