【React】Get Started

1. React之初衷

• 首先用原生JS实现一个简单的功能：

//html
    <div>
      <sapn id="result">0</sapn>
      <button id="add">+</button>
      <button id="minus">-</button>
    </div>

//js
let result = document.querySelector('#result')
let add = document.querySelector('#add')
let minus = document.querySelector('#minus')

add.addEventListener('click',function(){
   let number = parseInt(result.innerText,10)
   number += 1
   result.innerText = number
 })

minus.addEventListener('click',function(){
   let number = parseInt(result.innerText,10)
   number -= 1
   result.innerText = number
 })

实现加减功能

• 使用React实现同样的功能：

//html
//引入两个react 库
<script src="https://cdn.bootcss.com/react/16.9.0-rc.0/umd/react.production.min.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.9.0-rc.0/umd/react-dom.production.min.js"></script>
//创建一个根标签
<div id="root"></div>

//js
let number = 0

onClickButton =()=>{
  number += 1
  render()
}

onClickButton2 =()=>{
  number -= 1
  render()
}

render()

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

---

2. 原生js VS React

• 总结上面两种写法：

  • 第一种：使用原生js实现该功能的理念是，我们把整个前端分成页面和js两部分，首先在页面中创建标签及数据内容，通过JavaScript获取该元素，进行js 的 DOM 操作修改内容，修改之后在页面中重新渲染结果。

  • 第二种：一开始页面里什么都没有，直接在js里面声明变量（可以是任何类型的值）、并用React库函数生成元素，然后元素中添加变量的值，这个带有变量的元素自动同步到页面中，再通过js修改变量（它会重新声明变量替代页面中的元素的值），重新渲染到页面中局部更新，这种方法相比第一种方法没有走在页面中创建元素和js获取元素的过程。

这就是React的最初的思想基础，只往页面中添加，绝不会从页面中获取。

---

3. JSX的发明

//React.createElement('div',...)
let div = 
    h('div',{className:'parent'},
            h('span', {className: 'red'}, number),
            h('button',{onClick:onClickButton},'+'),
            h('button',{onClick:onClickButton2},'-')     
    )

上面代码从形式上来看和下面的代码一摸一样：

//以下是js代码,不是html
<div class="parent">
    <span class="red">{number}</span>
    <button onClick={onClickButton}>+</button>
    <button onClick={onClickButton2}>-</button>
</div>

所以React推荐写成下面这种形式，再利用一些工具翻译成上面的代码就可以达到预期效果了
. React之初衷

• 首先用原生JS实现一个简单的功能：

//html
    <div>
      <sapn id="result">0</sapn>
      <button id="add">+</button>
      <button id="minus">-</button>
    </div>

//js
let result = document.querySelector('#result')
let add = document.querySelector('#add')
let minus = document.querySelector('#minus')

add.addEventListener('click',function(){
   let number = parseInt(result.innerText,10)
   number += 1
   result.innerText = number
 })

minus.addEventListener('click',function(){
   let number = parseInt(result.innerText,10)
   number -= 1
   result.innerText = number
 })

实现加减功能

• 使用React实现同样的功能：

//html
//引入两个react 库
<script src="https://cdn.bootcss.com/react/16.9.0-rc.0/umd/react.production.min.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.9.0-rc.0/umd/react-dom.production.min.js"></script>
//创建一个根标签
<div id="root"></div>

//js
let number = 0

onClickButton =()=>{
  number += 1
  render()
}

onClickButton2 =()=>{
  number -= 1
  render()
}

render()

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

---

2. 原生js VS React

• 总结上面两种写法：

  • 第一种：使用原生js实现该功能的理念是，我们把整个前端分成页面和js两部分，首先在页面中创建标签及数据内容，通过JavaScript获取该元素，进行js 的 DOM 操作修改内容，修改之后在页面中重新渲染结果。

  • 第二种：一开始页面里什么都没有，直接在js里面声明变量（可以是任何类型的值）、并用React库函数生成元素，然后元素中添加变量的值，这个带有变量的元素自动同步到页面中，再通过js修改变量（它会重新声明变量替代页面中的元素的值），重新渲染到页面中局部更新，这种方法相比第一种方法没有走在页面中创建元素和js获取元素的过程。

这就是React的最初的思想基础，只往页面中添加，绝不会从页面中获取。

---

3. JSX的发明

//React.createElement('div',...)
let div = 
    h('div',{className:'parent'},
            h('span', {className: 'red'}, number),
            h('button',{onClick:onClickButton},'+'),
            h('button',{onClick:onClickButton2},'-')     
    )

上面代码从形式上来看和下面的代码一摸一样，这是发明React过程中的最聪明的优化

//以下是js代码,不是html
<div class="parent">
    <span class="red">{number}</span>
    <button onClick={onClickButton}>+</button>
    <button onClick={onClickButton2}>-</button>
</div>

所以React推荐写成下面这种HTML形式写的JavaScript代码，其实是js的扩展（同时把这代码称为虚拟DOM，实际不存在的DOM，本质上是对象）。
再利用一些工具翻译成上面的JSX代码就可以达到预期效果了 。
[jsbin https://jsbin.com] 和 [Babel https://babeljs.io]都提供了翻译JSX的功能。