<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://cdn.bootcss.com/react/16.7.0/umd/react.production.min.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.7.0/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
</html>
<style>
.red{
color: red;
}
.parent{
border: 1px solid green;
}
</style>
版本一
let number = 0
render()
let add = document.querySelector('#add')
let minus = document.querySelector('#minus')
add.onclick = ()=>{
number +=1
render()
}
minus.onclick = ()=>{
number -=1
render()
}
function render(){
let span = React.createElement('span',{className:'red'},number) //创建节点
ReactDOM.render(span,document.querySelector('#root')) //把span放到#root中
}
版本二
let number = 0;
let onClickButton = ()=>{
number += 1
render()
}
let onClickButton2 = ()=>{
number -= 1
render()
}
render()
function render(){
let span = React.createElement('span',{className:'red'},number) //创建一个span,类名是red,把number传进去
let button = React.createElement('button',{onClick:onClickButton},'+') //创建一个button，绑定一个事件onClickButton，把+传进去
let button2 = React.createElement('button',{onClick:onClickButton2},'-') //创建一个button，绑定一个事件onClickButton2，把-传进去
let div = React.createElement('div',{className:'parent'},button,span,button2) //创建一个div,类名是parent，把button span button 元素传进去
ReactDOM.render(div,document.querySelector('#root')) //用react生成上面的div,放到#root中
// 在修改span时，react会和原来的数据做对比，只更新局部修改，不会整个替换。
}
版本三 进一步优化render函数
let number = 0;
let h = React.createElement;
let onClickButton = ()=>{
number += 1
render()
}
let onClickButton2 = ()=>{
number -= 1
render()
}
render()
function render(){
let div =
h('div',{className:'parent'},
h('button',{onClick:onClickButton},'+'),
h('span',{className:'red'},number),
h('button',{onClick:onClickButton2},'-')
)
//对比之后发现，上面这种写法很像下面这种。
// react发明者惊讶的发现，代码和标签没什么区别，所以能不能直接写下面的标签代码，用一个程序翻译成上面的代码
// 这个程序就叫做JSX翻译器
// `<div class="parent">
// <button onclick="onClickButton">+</button>
// <span>${{number}}</span>
// <button onclick="onclickButton2">-</button>
// </div>`这是jsx代码 这不是写html,是用简便的方法写js（只是用html的形式来写js）
//最终这种写法被babel采纳了，原生支持翻译 https://babeljs.io/repl
ReactDOM.render(div,document.querySelector('#root')) //用react生成上面的div,放到#root中
}
版本四
let number = 0;
let h = React.createElement;
let onClickButton = ()=>{
number += 1
render()
}
let onClickButton2 = ()=>{
number -= 1
render()
}
render()
function render(){
let div =
//使用JSX编译一下
<div class="parent">
<button onClick="{onClickButton}">+</button>
<span>{number}</span>
<button onClick="{onClickButton2}">-</button>
</div>
//这样写不能运行，不是合法的语法：
//有两种办法，①用webpack babel翻译一下 ②用jsbin,把js改成jsx
ReactDOM.render(div,document.querySelector('#root'))
//优化上面代码
ReactDOM.render(
// 这个就是虚拟dom,虚拟dom就是个对象
<div className="parent">
<button onClick="{onClickButton}">+</button>
<span className='red'>{number}</span>
<button onClick="{onClickButton2}">-</button>
</div>,
document.querySelector('#root')) //把上面那段代码 放到#root里面
}
// 总结：由于dom Api 太难用了，所以react做到不择手段的不去访问dom,只更新数据，构造出一个虚拟dom
//打印出虚拟dom,知道虚拟dom就是个对象。
// let span = <span>hi</span>
// console.log(span)
总结：
-
JSX到底是什么：jsx就是用html的形式来写js,一种js的拓展
-
虚拟dom是什么：非真实的dom,一般用对象来表示。虚拟dom就是表示dom节点的对象。
预览在线代码
网友评论