之前一直用 React.js 来写一个电影选购商城，对于刚上手的我来说感觉处处和 Vue.js 差不多呀，反正就是无脑使用数据绑定，然后 render 就收工了，一直没有去了解 React 诞生的原因。如果你也一直用着 React.js 但是不了解它的历史，那么希望这篇文章可以帮到你。
简单的加减器
我们先来做一个简音的加减器，要求
- 显示一个数字
- 点击按钮+，数字加1
- 点击按钮-，数字减1
使用原生的 DOM API，我们可能会写出这样的代码：
<div>
<span id="result">0</span>
<button id="add">+</button>
<button id="minus">-</button>
</div>
let result = document.querySelector('#result')
let add = document.querySelector('#add')
let minus = document.querySelector('#minus')
add.addEventListener('click', function () {
// Turn to number
let number = parseInt(result.innerText)
number += 1
result.innerText = number
})
minus.addEventListener('click', function () {
// Turn to number
let number = parseInt(result.innerText)
number -= 1
result.innerText = number
})
这里的代码无非就是
- 先获取要用的元素
- 每次点击先获取值，然后进行处理（加减法）
- 最后再赋上新值
这就是我们经常说的“意大利面条”代码，跟语文老师说的“你的文章写得跟流水账一样”。怎么才能避免这样的写法呢？答案：将代码抽象。
思路
我们现在的思路就是下图这样的。
React 程序员这时候想要是能把上面的获取步骤去掉就好了：
- 我不从 DOM 元素里取，而是在 JS 里直接生成一个 DOM 元素
- 每次值改变的时候，重新将这个元素渲染（清除，修改，追加）
虚拟 DOM
生成 DOM 元素当然不是就用 document.createElement 那么简单了，我们希望创建 DOM 的时候把其下面的子元素和属性都带上一并创建，一个好的创建函数可以是这样的：
createElement(RootElement root, Attributes {}, Children [])
有了这个创建元素的函数后我们就可以不用在 HTML 里写元素了，直接用这个函数创建就好。
<div id="root"></div>
这样写JS就更容易理解了。
let number = 0
let add = () => {
number += 1
render()
}
let minus = () => {
number -= 1
render()
}
let render = () => {
let span = React.createElement('span', { className: 'red' }, number)
let addBtn = React.createElement('button', {onClick: add}, '+')
let minusBtn = React.createElement('button', {onClick: minus}, '-')
let div = React.createElement('div', { className: 'parent' }, span, addBtn, minusBtn)
ReactDOM.render(div, document.querySelector('#root'))
}
render()
现在我们的思路是：点击 => 修改数据 => 渲染，去掉了取值的操作。
JSX 的发明
这时候 React 程序员还是觉得不好，这一大坨的React.createElement很zz，所以他们做了下面的3件事：
- 先将
React.createElement用h来代替，即let h = React.createElement。嗯，这样代码缩短了一点点 - 将一次使用过的变量直接传入创建
div的React.createElement里，所以变成这样
let div =
h( 'div', { className: 'parent' },
h('span', { className: 'red' }, number),
h('button', {onClick: add}, '+'),
h('button', {onClick: minus}, '-'))
- 这时候有没有突然发现这样的代码和我们的 HTML 有点像啊？
div是父元素，其它的都是子元素，只要缩进缩得好，一切好像都能用 HTML 代码来表示
let trans = `
<div class="parent">
<span class="red">number</span>
<button onclick="add">+</button>
<button onclick="minus">-</button>
</div>`
所以 JSX 就被发明出来了，为了能够区分变量和字符串，变量要用{}来包住变量，而且为了和 HTML 区分 onclick 变成 onClick、class 变成 className
let jsx = `
<div className="parent">
<span className="red">{number}</span>
<button onClick={add}>+</button>
<button onClick={minus}>-</button>
</div>`
看看用 Babel 翻译后的结果
Babel 转译后的结果.png
最终React版本
直接使用 JSX 语法就是我们 React 一直使用的样子了。
let number = 0
let add = () => {
number += 1
render()
}
let minus = () => {
number -= 1
render()
}
let render = () => {
ReactDOM.render(
<div className="parent">
<span className="red">{number}</span>
<button onClick={add}>+</button>
<button onClick={minus}>-</button>
</div>,
document.querySelector('#root'))
}
render()
很多人开始学 React 的时候一直觉得虚拟 DOM 是什么高大上的东西，其实简单来说就是假的 DOM。为什么呢？因为不过是通过对象来创建 DOM 元素罢了，如
let attr = {
className: "parent",
text: 'hello'
}
React.createElement(root, attr, childElement)
所以虚拟 DOM 其实就是表示真实 DOM 元素的对象而已。
（完）
