序
- 部分开源项目是基于 Web 前端框架 React 构建的，有必要了解一二。
避免一脸懵逼，不知道怎么修改相关代码和配置
概述: React
React 的简介
React起源于Facebook的内部项目
因为该公司对市场上所有
JavaScript MVC框架 都不满意，就决定自己写一套，用来架设
做出来以后，发现这套东西很好用，就在2013年5月开源了。
React是一个用于动态构建用户界面的JavaScript库(只关注于视图)。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
React 的特点
-
声明式设计与编码 − React采用声明范式，可以轻松描述应用。
-
高效 − React通过对DOM的模拟，最大限度地减少与DOM的交互。
高效（优秀的Diffing算法）
-
灵活 − React可以与已知的库或框架很好地配合。
-
JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
-
Component & 组件化编码 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
-
单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
单向数据绑定
-
虚拟 DOM
-
React Native 编写原生应用
React 高效的原因
- 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
- DOM Diffing算法, 最小化页面重绘。
React 官网
- https://reactjs.org/
- https://react.dev/ 【现官网】
- https://react.docschina.org/ 【中文官网】
- https://github.com/facebook/react
- https://github.com/facebook/react/releases
React 的主要原理
- 传统的web应用，操作DOM一般是直接更新操作的
但是我们知道DOM更新通常是比较昂贵的。
而React为了尽可能减少对DOM的操作，提供了一种不同的而又强大的方式来更新DOM，代替直接的DOM操作。
就是VirtualDOM,一个轻量级的虚拟的DOM，就是React抽象出来的一个对象，描述dom应该什么样子的，应该如何呈现。
通过这个Virtual DOM去更新真实的DOM，由这个Virtual DOM管理真实DOM的更新。
- 为什么通过这多一层的
Virtual DOM操作就能更快呢？ > + 这是因为React有个diff算法，更新VirtualDOM并不保证马上影响真实的DOM，React会等到事件循环结束，然后利用这个diff算法，通过当前新的dom表述与之前的作比较，计算出最小的步骤更新真实的DOM。
最明显的一点好处就是React所谓的
dom diff，能够实现delta级别的dom更新。
当有数据变动导致DOM变动时，React不是全局刷新，而是通过它内部的dom diff 算法计算出不同点，然后以最小粒度进行更新。
这也是React号称性能好的原因。
Facebook为什么要建造React
- Facebook的工程师在做大型项目时，由于他们非常巨大的代码库和庞大的组织，使得MVC很快变得非常复杂，每当需要添加一项新的功能或特性时，系统的复杂度就成级数增长，致使代码变得脆弱和不可预测，结果导致他们的MVC正在土崩瓦解,所以Facebook认为MVC不适合大规模应用，当系统中有很多的模型和相应的视图时，其复杂度就会迅速扩大，非常难以理解和调试，特别是模型和视图间可能存在的双向数据流动。
基于上面的原因，Facebook认为
MVC无法满足他们的扩展需求，为了解决上述问题需要“以某种方式组织代码，使其更加可预测”，于是他们提出的Flux和React来实现。
React Hello World Application
Hello World Application
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello, React Application!</title><!-- 引入 React 核心库 --><!-- <script src="../js/react.development.js"></script> --><script src="https://unpkg.com/react@18/umd/react.development.js"></script><!-- 引入 react-dom 用于支持 react 操作 DOM --><!-- <script src="../js/react-dom.development.js"></script> --><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><!-- 引入babel：1. ES6 ==> ES52. jsx ==> js--><!-- <script src="../js/babel.min.js"></script> --><!-- 生产环境中不建议使用 | 在浏览器中使用 Babel 来编译 JSX 效率是非常低的 --><script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</head>
<body><!-- 准备好一个 DOM 容器 --><div id="test"></div><!-- 方式1 --><!-- <script type="text/babel">// 1. 创建虚拟 DOMconst VDOM = <h1>Hello，React</h1>// 2. 渲染到页面中的指定 DOM// ReactDOM.render(虚拟DOM，真实DOM)ReactDOM.render(VDOM,document.getElementById('test'))</script> --><!-- 方式2 --><script type="text/babel">// 简单的 React 组件function App() {return <h1>Hello, React Application!!</h1>;}const root = ReactDOM.createRoot(document.getElementById("test"));// 渲染 React 组件到 DOMroot.render(<App />);</script>
</body>
</html>
效果
基础库的导入
- React 库: 用于构建用户界面。
- ReactDOM 库：用于在浏览器中渲染 React 组件。
- Babel Standalone 库：用于在浏览器中即时编译 JSX 语法。（不建议生产环境中使用）
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js"></script><!-- 生产环境中不建议使用 | 在浏览器中使用 Babel 来编译 JSX 效率是非常低的 -->
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/6.26.0/babel.min.js"></script>
除了通过 javascript 导入3个基础库的方式外，还可以使用
create-react-app工具创建的react开发环境：
import React from "react";
import ReactDOM from "react-dom";function Hello(props) {return <h1>Hello World!</h1>;
}ReactDOM.render(<Hello />, document.getElementById("root"));
Y 推荐资源
- 官网
- 快速入门教程
https://react.docschina.org/learn
教程：井字棋游戏 | https://react.docschina.org/learn/tutorial-tic-tac-toe
React 哲学 | https://react.docschina.org/learn/thinking-in-react
- 在线编辑与效果试验
- https://www.runoob.com/try/try.php?filename=try_react_hw
- React JS Download & CDN
- React 官方
http://react-cn.github.io/react/downloads.html
<!-- 生产环境中不建议使用 | 在浏览器中使用 Babel 来编译 JSX 效率是非常低的 -->
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>//development
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://fb.me/react-0.14.3.js"></script>
<script src="https://fb.me/react-dom-0.14.3.js"></script><script src="https://fb.me/react-with-addons-0.14.3.js"></script>
<script src="https://fb.me/react-dom-0.14.3.js"></script>//production
<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script><script src="https://fb.me/react-with-addons-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>//npm方式
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(<App />, ...);
- 字节跳动的 React CDN 库
- https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js
- https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js
- https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/6.26.0/babel.min.js
react.js: React 的核心库，用于构建用户界面。
react-dom.js: 提供与 DOM 相关的操作，用于在浏览器中渲染 React 组件。
babel.js: 用于将 ES6+ 代码转换为向后兼容的 JavaScript 版本，确保代码在不同浏览器中的兼容性。
- Staticfile CDN 的 React CDN 库
<script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
- https://gitcode.com/open-source-toolkit/6a556/ (开源工具包 - React.js 核心文件包下载)
<script src="path/to/babel.js"></script>
<script src="path/to/react.js"></script>
<script src="path/to/react-dom.js"></script>
X 参考文献
- React 教程 - 菜鸟教程
