为什么我们需要React？这篇我想通过一个简单的加减计数器，探讨下react的诞生的源头一：前端传统的实现逻辑（原生js

这篇我想通过一个简单的加减计数器，探讨下`react`的诞生的源头

一：前端传统的实现逻辑（原生js）

简单总结下传统方法的实现逻辑：
1.先从页面获取元素
2.操作处理获取的元素
3.将处理的结果传回页面

二：React的实现逻辑

简单总结下React方法的实现逻辑：
1.直接操作处理元素
2.将处理的结果回传页面

可以看到React直接打断了传统逻辑，先在js中处理元素，然后再将处理的结果直接回传回页面

我们将上诉代码优化下,在页面上只保留个容器，在js中直接生成所有元素,再回传到页面上渲染

.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>

.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'))
}

三：比较上述两种实现方式

直观上可以看出React的实现方式更加的简洁，更有逻辑性

单纯比较逻辑性，操作页面上元素的传统实现方式，我们需要先获取元素，之后操作，最后再将结果返回页面更新

但是React提供了另一种全新的方式，我们只需要声明操作元素，然后渲染即可完成原先的工作，这极大地简化了工作量，这可能也是React流行的原因吧