JSX语法的诞生前夜一. JSX诞生前夜

一. JSX诞生前夜

我们接着上次的代码讨论，探讨下JSX语法的诞生

  .html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>React 实现加减控制</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
</head>
<body>
	<div id="root">
	  
	</div>
</body>
</html>
.css
	#root{
	color:red
            }
.parent{
	border:1px solid black;
        }
span{
	border:1px solid red;
}

.js
	
let number=0


let add= ()=>{
	++number
	render()
}

let minus= ()=>{
	--number
	render()
}

render()

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

本着写一下，玩一年，装逼不花一分钱的心态，我将.js中的代码简单优化下

.js
let number=0
let c=React.createElement


let add= ()=>{
	++number
	render()
}

let minus= ()=>{
	--number
	render()
}

render()

function render(){
	
        let div=c('div',{className:"parent"},
                  c('span',{className:"hello"},number),
                  c('button',{onClick:add},"+"),
                  c('button',{onClick:minus},"-")
                )
	
  ReactDOM.render(div,document.querySelector('#root'))
}

哎，render()中的div变量似乎有点熟悉，好，现在把我们当成是Jordan Walke

这个结构我好像在哪里见到过，她是如此的熟悉，让我魂牵梦萦啊，没错，你没有看错，她就是很像div块

对照一
let div=c('div',{className:"parent"},
           c('span',{className:"hello"},number), 
           c('button',{onClick:add},"+"),                  
           c('button',{onClick:minus},"-")
         )

对照二
<div class="parent">
    <span class="hello">{number}</span>
    <button onClick={add}>+</button>
    <button onClick={minus}>-</button>
</div>

我们将上下两部分代码做个对照，发现除了包裹标签的不同，结构完全一样啊

那么我们以后用到render()函数的时候能不能直接将div变量中的对照一换成对照二呐

`这样不是可以加快工作效率吗，想想纯粹写html不是比写js代码更香吗`

那我们接下来的工作就是开发个翻译器，将对照二翻译成对照一中的代码运行（当然我们现在已经知道了有专门的工具来做这件事，如babel）

但是在jsx还未诞生时，当Jordan Walke走到上面那几步时，我想他是不是会突然灵光一闪，就像上面的想法似的开发了JSX语法！！！

二.总结

要牢记我们写的不是html,她是一种全新的语法JSX

上述例子中的div也不是html，她是一个对象，也就是传说中的虚拟DOM

JSX的诞生似乎就像我们想的那样有趣

啧啧啧，真香^_^