正文
从零开始学前端，React框架背后的核心机制和原理JSX
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
什么是React
React是起源于Facebook的一个前端框架，用于构建用户界面的JavaScript库，Facebook用来探索一种更加高效优雅的Javascript MVC框架来架设Instagram网站用的，后来觉得还不错，于是开源出来。
- 官方开源地址：https://github.com/facebook/react
- 官方案例地址：https://reactjs.org
- FaceBook开源官网：https://opensource.facebook.com/projects/
React特性- 声明式
React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。
以声明式编写 UI，可以让你的代码更加可靠，且方便调试。
- 组件化
创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。
组件逻辑使用 JavaScript 编写而非模版，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。
- 一次学习，随处编写
无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。
React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。
安装最基础的环境NPM
React依赖NPM（Node.js Package Manager）来安装，所以我们可以先安装Node.Js环境。
Node.Js会自动带NPM组件和自动安装配套的可选组件，非常简便。
v14.15.1 LTS长期支持版：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi
官网：https://nodejs.org/zh-cn/
安装推荐的集成编辑器Visual Studio Code
最新Stable版：https://aka.ms/win32-x64-user-stable
官网：https://code.visualstudio.com/
创建项目目录并进行NPM初始化
创建一个名为zeroreact的文件夹，用Visual Studio Code来进行打开，在终端界面，执行如下命令，进行NPM初始化。
npm init
一路回车就行了，创建后还能继续编辑的。
初始化完成之后，会看到当前项目根目录会新建一个叫package.json的文件，其内容如下：
{
"name": "zeroreact",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
其实中main是一个Node项目指向的开始文件，但是没有也可以。
创建Visual Studio Code的调式配置Launch.json
切换到Visual Studio Code左侧的运行菜单，点击创建Launch.json文件，选择你中意的可选浏览器平台即可。
当前项目根目录会自动生成一个Launch.json配置文件，这个配置就是调式配置，它指向了调式项目时启动哪个平台。
其内容如下(以Edge:Launch为例)：
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-msedge",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
配置好了之后，启动调式即可打开对应的浏览器，并且自动打开其中url配置所对应的地址值。
关于React实际必选项JSX
虽然React官方说，React可以不依赖JSX去运行，但是实际上JSX可以说是必选项。
JSX简介
而JSX是什么呢？
JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。
注意的是，JSX的特性更接近JavaScript而不是HTML，所以React DOM使用camelCase（小驼峰）命名来定义属性的名称，而不是使用HTML的属性名称。例如：class变成了className，而tableindex则对应着tableIndex
JSX基本格式：
- 简单闭合
const element = <img src={user.avatarUrl} />;
- 嵌套闭合
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
这些有趣的标签语法既不是字符串也不是 HTML。
它被称为JSX，是一个JavaScript的语法扩展。建议在React中配合使用JSX，JSX可以很好地描述UI应该呈现出它应有交互的本质形式。JSX可能会使人联想到模版语言，但它具有JavaScript的全部功能。
JSX可以生成React“元素”。
安装JSX所需的WebPack和Babel组件
React中的JSX实际上是通过Babel组件，把JSX的代码最终翻译成普通的Javascript代码的。
Babel转译器会把JSX转换成一个名为React.createElement()的方法调用
安装WebPack
- https://webpack.js.org/guides/getting-started/
什么是WebPack呢？
WebPack其核心在于让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。不仅仅是JavaScript文件，我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用，webpack中的各种资源模块进行打包合并成一个或多个包（Bundle）。在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作，接着我们只要处理最后那个js文件即可。
为什么要用WebPack呢？
WebPack其实它是一个Javascript的打包工具，它的输入和产出在正常情况下都是Javascript的文件，它最大的作用就是帮助我们把Javascript里面的import和require，把多文件打包成一个单个的Js文件。所以说呢，webpack往往是由一个文件作为入口，这个文件可能会import一些东西，可能会require一些东西，不管你用哪种写法都是可以的，然后它最终把它变成一个单个的大的文件，这样呢，比较符合我们在Web上的性能还有发布各方面的一些需求，当然WebPack它还同时承载了很多工具，其中就包括接下来会说到的前端重要的工具Babel。
npm install webpack webpack-cli --save-dev
通过以上命令，同时安装webpack和webpack-cli两个组件，并且--save-dev表示这两个组件会被加到package.json中的devDependencies节点中去。
注意：这时候，如果你想直接使用webpack指令，是不可行的，因为它没有被全局安装，如果你需要可以通过npm install xxx -g这种形式去安装，但是目前已经不被推荐了。
我们可以采用被推荐的如下命令来调用WebPack:
npx webpack
然后你会看到有个报错。
其实，webpack命令是执行了，但是因为我们没有给webpack做对应的配置及入口文件，所以它最终执行失败。
这时候，我们可以在根目录新建一个叫webpack.config.js的文件，根据Node的标准，我们可以用module.exports的写法，内如如下：
module.exports={
entry:{
main: './main.js'
}
}
其中entry就是入口的意思，然后main是默认入口，main的指向我们可以暂时先给一个main.js文件，同时我们需要在根目录新建一个空的main.js文件。
完成以上配置之后，我们可以再次执行
npx webpack
即可看到打包成功的信息了，同时你会发现会新建一个dist目录来输出WebPack最终打包好的Js文件。
打包后的main.js是一段被压缩的JS代码，可阅读性呢不是很好，如果我们想看到更加可阅读性的JS代码，可以在webpack.config.js增加开发阶段的配置：
module.exports={
entry:{
main: './main.js'
},
mode: 'development',
optimization:{
minimize: false
}
}
新增配置项mode=development，optimization.minimize被设置成false之后，再次执行npx webpack会看到main.js中会得到更加可阅读性的JS代码。
安装Babel
- https://www.babeljs.cn
什么是Babel呢？
Babel是一个工具链，主要用于将ECMAScript 2015+版本的代码转换为向后兼容的JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
为什么使用Babel呢？
Babel这个工具是一个把新版本JS文件翻译成老版本JS文件的这样一种工具。
Babel在WebPack里面是以Loader的形式去使用的，WebPack允许我们使用Loader去定制各种各样的文件，比如说，原则上WebPack只能打包普通的JS文件，但是我们如果想把CSS文件以某种形式打包成JS文件的话，那么我们就可以写一个CSS-Loader，如果我们想把HTML当作一个JS文件去打包进来，那我们就可以写一个HTML-Loader，而这个Loader也可以是独立的包，我们只要在WebPack的配置里面配一下就可以了。
接下来我们，安装Babel组件，执行如下命令：
npm install --save-dev babel-loader @babel/core @babel/preset-env
这里安装三个组件babel-loader、@babel/core、@babel/preset-env，以空格隔开即可。
配置并使用Babel
我们可以通过WebPack的Module来配置Babel组件，其中Module中重要的概念就是Rules，它是一个数组，里面可以是一个对象，如下配置新增一个关于babel-loader的rule规则配置。
module:{
rules:[
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options:{
presets: ['@babel/preset-env']
}
}
}
]
}
如配置所示，test中是一个针对所有JS文件的正则表达式，会匹配所有的JS文件，那么遇到JS文件会执行use中的loader应用，这里指定了loader为Babel-Loader,这样所有的JS文件都会走Babel-Loader来完成一次翻译。同时，我们还需要给Babel-Loader配置一个presets（注意presets也是一个数组值），其值是前面我们安装的@babel/preset-env，这里的presets可以理解为它是一系列Babel的config的一种快捷方式。
完成上诉Babel-Loader配置之后，我们可以来实现下真正的翻译。
在main.js中，我们可以加入一段JS代码，如下：
for(let i of [1,2,3])
{
console.log(i);
}
再次执行npx webpack之后，我们将看到打包之后的main.js
翻译后的JS代码变成了一个eval的for方法，这将是最终被执行的JS代码。
为了看到这段JS最终执行的效果，我们在dist目录里面新建一个main.html，来引用最终生成main.js，并且F12看下输入效果。
可以看到，如预期结果，依次输出了1,2,3
配置并启用用于翻译JSX的Babel插件
默认Babel组件是没有能力来处理JSX的。
如果我们此时在main.js里面写一个JSX，那么它会报错。
let a = <div />
但是有一个Babel插件是可以的，叫babel/plugin-transform-react-jsx，接下来我们安装并配置它。
npm install @babel/plugin-transform-react-jsx --save-dev
然后我们还需要在Babel-Loader中配置这个Plugin，在Options配置节点中，新建一个名为plugins的节点，这也是一个数字，里面填入我们刚刚安装的Babel插件@babel/plugin-transform-react-jsx。
module:{
rules:[
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options:{
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-react-jsx']
}
}
}
]
}
再次执行npx webpack，就会发现，带JSX语法的JS已经可以正常翻译了，得到后的JS如图：
这里我们看到<div/>被翻译为一个React.createElement(\"div\", null);的方法了。
备注：
可以看到，默认它会被一个叫React的函数来调用createElement方法。
这里我们也可以通过配置来修改调React.createElement这个名字，这里@babel/plugin-transform-react-jsx支持一个叫pragma的参数，这里可以指定你喜欢的名字，比如我这里的zero_react_create
plugins: [['@babel/plugin-transform-react-jsx', { pragma: 'zero_react_create'}]]
这样翻译后会变成你自定义的名字：
探索JSX语法糖机制带属性的JSX
let a = <div id="a" class="c"/>
翻译后：
var a = zero_react_create("div", {
id: "a",
"class": "c"
});
带子节点的JSX
let a = <div id="a" class="c">
<div/>
<div/>
<div/>
</div>
翻译后：
var a = zero_react_create("div", {
id: "a",
"class": "c"
}, zero_react_create("div", null), zero_react_create("div", null), zero_react_create("div", null));
发现子节点都会追加到后面了。
构造zero_react_create函数，并且输出它
function zero_react_create(tagName, attributes, ...children){
return document.createElement(tagName);
}window.a = <div id="a" class="c">
<div/>
<div/>
<div/>
</div>
翻译执行后，可以在浏览器console里面输入a，回车看到a的输入值：
应用子节点，并且输出它
function zero_react_create(tagName, attributes, ...children){ let e = document.createElement(tagName); for(let p in attributes){
e.setAttribute(p, attributes[p]);
} for(let child of children){
e.appendChild(child);
} return e;
}window.a = <div id="a" class="c">
<div/>
<div/>
<div/>
</div>
翻译后执行：
子节点中包含值，并且输出它
function zero_react_create(tagName, attributes, ...children){ let e = document.createElement(tagName); for(let p in attributes){
e.setAttribute(p, attributes[p]);
} for(let child of children){
if(typeof child === 'string'){
child = document.createTextNode(child);
}
e.appendChild(child);
} return e;
}window.a = <div id="a" class="c">
<div>abc</div>
<div/>
<div/>
</div>
这里的变化是，如果子节点类型是个字符串，那我们就把Child变成一个文本节点。
翻译后：
将输出挂载到Body里面
为了挂载到Body，我们现在main.html新建好Body标签：
<body>
<script src="main.js"></script>
</body>
然后修改JSX代码如下：
document.body.appendChild(<div id="a" class="c">
<div>abc</div>
<div/>
<div/>
</div>);
翻译后执行，就可以把我们JSX描述的HTML及数据，成功的以DOM形式挂载到Boby里面了
这样我们就实现了一种完全基于实DOM的zero_react_create方法。
探索JSX自定义组件机制初探自定义标签
在JSX中有个规定，如果你的Tag是小写，比如div，它就认为这是一种原生的标签，如果是大写开头的，那就认为是自定义组件，比如我们将div改成MyComponent
document.body.appendChild(<MyComponent id="a" class="c">
<div>abc</div>
<div/>
<div/>
</MyComponent>);
翻译后运行，会得到一个报错。
在这里，MyComponent变成了我们自定义的一个对象，或者Class或者函数
这里我们先做Class处理。
class MyComponent{}
翻译后执行，会得到一个报错
这是因为zero_react_create方法中TagName这时候已经不是一个原始的标签字符串了，在执行let e = document.createElement(tagName);会报错，因为这时候TagName已经变成了一个对象。
这里，我们修改下zero_react_create方法的判断。
function zero_react_create(tagName, attributes, ...children){ let e;
if(typeof tagName === 'string'){
e = document.createElement(tagName);
}
else
{
e = new tagName;
} for(let p in attributes){
e.setAttribute(p, attributes[p]);
} for(let child of children){
if(typeof child === 'string'){
child = document.createTextNode(child);
}
e.appendChild(child);
} return e;
}
翻译运行后发现报错如下：
这里是因为，e这时候已经不是一个原生对象了，那我们自然有很多原始对象可以支持的就运行不了了，所以这里e.setAttribute(p, attributes[p]);自然会报错。
这时候，我们可以给所有原生的DOM对象，都加一个Wrapper，让它可以正确的执行下去。
开启自定义组件之路
我们新建一个名为zero-react.js的文件，把前面main.js那个zero_react_create函数搬过来，并且Export出来。
export function zero_react_create(tagName, attributes, ...children){ let e;
if(typeof tagName === 'string'){
e = document.createElement(tagName);
}
else
{
e = new tagName;
} for(let p in attributes){
e.setAttribute(p, attributes[p]);
} for(let child of children){
if(typeof child === 'string'){
child = document.createTextNode(child);
}
e.appendChild(child);
} return e;
}
并且在main.js中import文件zero-react.js。
import { zero_react_create } from './zero-react.js'
重新编写zero-react.js
对外公开一个Component组件，所有自定义组件继承它
export class Component{ constructor(){
this.props = Object.create(null);
this.children = [];
this._root = null;
} setAttribute(name, value){
this.props[name] = value;
} appendChild(component){
this.children.push(component);
} get root(){
if(!this._root){
this._root = this.render().root;
}
return this._root;
}
}
新建一个TextWrapper来处理纯文本子节点。
class TextWrapper{ constructor(content){
this.root = document.createTextNode(content);
}
}
新建一个ElementWrapper来处理原生标签节点。
class ElementWrapper{ constructor(tagName){
this.root = document.createElement(tagName);
} setAttribute(name, value){
this.root.setAttribute(name, value);
} appendChild(component){
this.root.appendChild(component.root);
}
}
替换原来zero_react_create函数中的两个实现
其中把e = document.createElement(tagName);替换成e = new ElementWrapper(tagName);，把child = document.createTextNode(child);替换成child = new TextWrapper(child);,得到如下新的zero_react_create函数
export function zero_react_create(tagName, attributes, ...children){ let e;
if(typeof tagName === 'string'){
e = new ElementWrapper(tagName);
}
else
{
e = new tagName;
} for(let p in attributes){
e.setAttribute(p, attributes[p]);
} for(let child of children){
if(typeof child === 'string'){
child = new TextWrapper(child);
}
e.appendChild(child);
} return e;
}
最后对外公开一个render函数
export function render(component, parentElement){
parentElement.appendChild(component.root);
}
修改main.js中MyComponent的实现。
import { render, Component, zero_react_create } from './zero-react.js'class MyComponent extends Component{
render(){
return <div>zero component</div>
}
}render(<MyComponent id="a" class="c">
<div>abc</div>
<div/>
<div/>
</MyComponent>, document.body);
翻译后，运行可得：
但是我们还看不到子节点元素，这时候如果把子节点元素传进来：
class MyComponent extends Component{
render(){
return <div><h1>zero component</h1>
{this.children}
</div>
}
}
运行会报错：
因为这时候子节点会把当作一个数组传进去，但是原来child = new TextWrapper(child);处是没有能力处理这种情况的。
这时候，我们需要改造下这里。
export function zero_react_create(tagName, attributes, ...children){ let e;
if(typeof tagName === 'string'){
e = new ElementWrapper(tagName);
}
else
{
e = new tagName;
} for(let p in attributes){
e.setAttribute(p, attributes[p]);
} let insertChilder = (children) => {
for(let child of children){
if(typeof child === 'string'){
child = new TextWrapper(child);
}
if((typeof child === 'object') && (child instanceof Array)){
insertChilder(child);
}
else{
e.appendChild(child);
}
}
}
insertChilder(children); return e;
}
翻译执行后，就可以看到成功的处理了带多个子节点的情况了。
于是我们就打造了一个属于自己的自定义组件处理引擎了。
