项目结构

一个传统的 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 等工具的配置。

yarn eject

使用 Less 替代 Sass

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

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

Babel 配置

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

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