React 入门 2：React 的诞生

本文主要内容为 React 的诞生原因以及 JSX 的发明。

1. 简单的加减器

提个小需求：在页面上做一个简单的加减器，要求

• 页面上显示一个数字
• 点击按钮「+」，数字 + 1
• 点击按钮 「-」，数字 - 1

使用原生JS来实现：

//html 代码
<span id="result">0</span>
<button id="add">+</button>
<button id="minus">-</button>

// JavaScript 代码
// 获取显示「数字」的节点
let result = document.querySelector('#result')
let num = 0

add.addEventListener('click', function(){
  // 将字符串转换为数字
  num = result.innerHTML - 0
  num += 1
  result.innerHTML = num
})

minus.addEventListener('click', function(){
// 将字符串转换为数字
  num = result.innerHTML - 0
  num -= 1
  result.innerHTML = num
})

上面的代码在做什么？看下图：

vanillaJS.png

抽象的理解，步骤如下：

• JS从页面中提取数据
• 操作 number + 1 或 number - 1
• JS回填数据到页面里

这种一来一回的操作是不是很繁琐？React程序员想出了一种办法。

2. React 的诞生

以上面的代码为例，React的程序员对代码逻辑进行了优化，如图：

reactJS.png

即，直接往页面里填东西，而不用从页面里提取数据了。
页面上显示的永远是最新的数据。

这就是React的诞生。

3. 用 React 改写代码

先从 BootCDN 上引入「react」和「react-dom」两个库

let number = 0

let addOne = () => {
  number += 1
  render()
}

let minusOne = () => {
  number -= 1
  render()
}


render()

function render(){
  let span = React.createElement('span', null, number)
  let button1 = React.createElement('button', {onClick: addOne}, '+')
  let button2 = React.createElement('button', {onClick: minusOne}, '-')

  let div = React.createElement('div', {className: 'parent'}, span, button1, button2)
  ReactDOM.render(div, document.querySelector('#root'))
}

4. JSX的发明

优化上面的React代码：

• 把临时变量都删掉，把 div，span，button1，button2 直接放到 React.render 里面

function render(){
  let div = React.createElement('div', {className: 'parent'},
            React.createElement('span', null, number),
            React.createElement('button', {onClick: addOne}, '+'),
            React.createElement('button', {onClick: minusOne}, '-')
  )
  ReactDOM.render(div, document.querySelector('#root'))
}

• React 作者的优化：不如写成标签的样子吧，我来转义为正确的语法

function render(){
  ReactDOM.render(
    <div className="parent">
      <span>{number}</span>
      <button onClick={addOne}>+</button>
      <button onClick={minusOne}>-</button>
    </div>
    , document.querySelector('#root'))
}

注意：你写的标签代码不是HTML，是用HTML的形式来写JS（JSX语法）
这就是JSX的发明。

JSX代码可以在 Babel 上进行转义。

简单的说一下JSX语法吧：

• 表示变量
  { number }
• <div className="x" title="hi">hi</div>
  => React.createElement('div', {className: "x", title: "hi"}, "hi");
  即标签的属性不管写多长，都是 React.createElement 的第二个参数，标签的内容是 React.createElement 的第三个参数。