初入react-CSDN博客

本文链接：https://blog.csdn.net/weixin_44757675/article/details/139490099

原理

React的运行原理可以概括为以下几个关键步骤：

初始化：
- 当一个React组件首次被加载到页面上时，React会进行初始化。
- 在这个阶段，React会构建出对应的虚拟DOM（Virtual DOM）树。虚拟DOM是React组件树的一个复制品，是一种轻量级的JavaScript对象。
- 接着，通过render方法将虚拟DOM转化为HTML语言，并插入到指定的DOM节点中。
渲染：
- 组件的渲染会在初始化时执行一次。
- 当组件的状态（state）或属性（props）发生变化时，React会再次进行渲染。
- 值得注意的是，每次渲染都会构建完整的虚拟DOM树，但React只会对发生变化的DOM元素进行实际的更新。
Diffing算法：
- 在React中，每当数据发生变化时，它都会重新构建整个虚拟DOM树。
- 然后，通过一个叫做Diffing的算法，将当前整个虚拟DOM树和上一次的虚拟DOM树进行对比，找出DOM结构的区别。
- 这种技术可以减少不必要的渲染和操作，提高性能和效率。
Fiber Tree：
- 在React的较新版本中，引入了Fiber架构。
- 在首次加载时，React会将组件树转换为Fiber树（链式存储）。每个Fiber节点代表一个组件或DOM节点，并包含了与该节点相关的信息，如props、state、子节点等。
- 通过Diff算法比较前后两个Fiber树的差异，标记出需要更新的Fiber节点，并构建一个更新队列。
更新：
- 在提交阶段，React根据更新队列中的变更进行实际的DOM操作。
- 这些操作会被分解为多个小任务，并根据任务的优先级和时间片来动态地调度任务的执行顺序。
生命周期：
- React组件的生命周期包含初始化、更新和销毁三个阶段。
- 在这些阶段中，React提供了多个生命周期方法，允许开发者在特定时刻执行自定义的代码逻辑。

总结来说，React的运行原理是通过构建和比较虚拟DOM来减少不必要的DOM操作，提高性能。同时，React通过Fiber架构和生命周期方法提供了更多的灵活性和控制权，使开发者能够更好地管理和优化组件的行为。

项目结构解析

项目根目录
- package.json: 包含项目的元数据（如名称、版本、依赖等）以及项目的脚本命令。
- README.md: 项目的文档，描述项目、如何使用它、如何贡献等。
- .gitignore: 列出不应被 Git 跟踪的文件和目录。
- 其他配置文件，如 .editorconfig（用于跨编辑器设置）或 .eslintrc（用于 ESLint 规则）。
src 目录
- 这是你的主要源代码目录。
- 组件 (Components): 包含 React 组件的目录。通常，每个组件都在其自己的目录中，包含该组件的 JSX、样式（如 CSS、Sass、Less、Styled Components 等）和任何相关的测试文件。
  - MyComponent/
    - MyComponent.js 或 MyComponent.jsx
    - MyComponent.styles.css 或其他样式文件
    - MyComponent.test.js 或其他测试文件
- 页面 (Pages): 对于具有路由的 React 项目（如使用 React Router），你可以将页面组件放在这里。页面组件通常是一个或多个组件的组合，用于表示整个屏幕或应用视图。
- 资产 (Assets): 包含项目所需的图像、字体和其他非代码资产。
- API: 包含与后端 API 交互的代码，可能使用 fetch、axios 或其他库。
- Redux、MobX 或其他状态管理库: 如果你的项目使用 Redux、MobX 或其他状态管理库，你可能会在这里看到相关的代码，如 actions、reducers、selectors 和 stores。
- Hooks 或实用程序 (Hooks or Utilities): 自定义的 React Hooks 或其他实用程序函数。
- 路由 (Routing): 如果你的项目使用 React Router 或其他路由库，路由配置可能放在这里。
- 样式 (Styles): 全局样式或主题样式可能放在这里。但是，更常见的做法是将样式与组件一起放在组件目录中。
- 索引文件 (Index File): src/index.js 或 src/index.jsx 是项目的入口点，通常在这里初始化你的 React 应用并渲染它。
- 其他: 根据项目的需要，可能还有其他目录或文件，如 constants、types、services 等。
公共目录 (Public): 通常包含 favicon.ico、robots.txt 和 index.html 等静态文件。这些文件通常不被 Webpack 处理。
配置文件 (Config Files): 如 webpack.config.js（如果你使用 Webpack）、.babelrc（如果你使用 Babel）等。这些文件配置构建和打包过程。
测试目录 (Tests): 如果你使用 Jest、Enzyme 或其他测试库，你的测试文件可能放在这里。然而，更常见的做法是将测试文件与它们所测试的组件或功能放在同一目录中。
node_modules 目录: 当你运行 npm install 或 yarn 时，npm 或 yarn 会将项目的依赖项安装到这个目录中。这个目录通常不应该手动编辑，除非你确切知道自己在做什么。
dist 或 build 目录: 这是你的构建输出目录。当你运行构建命令（如 npm run build）时，Webpack 或其他构建工具会将你的源代码转换为一个或多个可以在生产环境中运行的文件，并将它们放在这个目录中。