这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战
哈喽大家好，今天我们来学习react，相信很多的对react的大名已经不陌生了吧?前端三大主流框架之一
react介绍
React 使创建交互式 UI 变得轻松。为应用程序中的每个状态设计简单的视图，当数据发生变化时，React 将有效地更新和呈现正确的组件。声明式视图使您的代码更可预测、更易于理解且更易于调试。
话不多说，让我们来体验一下吧
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(<h2>hello</h2>, document.getElementById("app"))
</script>
</body>
上面那段代码我相信各位都不陌生吧，想知道他是怎么编译的嘛？使用babel来编译它,可以使用Babel来体验一下
//编译后的样子
ReactDOM.render( /*#__PURE__*/React.createElement("h2", null, "hello"), document.getElementById("app"));
让我们来做一个小案例吧，比如说我们想要点击按钮，然后修改文本，这个大家估计都不陌生吧
//原生写法，相信大家都不陌生
<body>
<div id="app">
hello react
</div>
<button>修改文本</button>
<script>
const button = document.querySelector("button")
const html = document.getElementById("app")
button.addEventListener("click", () => {
html.innerHTML = "hello 幽幽"
})
</script>
</body>
先定义一个render函数，然后在里面执行react，然后调用该函数进行第一次渲染，然后定义点击函数，对name的内容做修改，然后重新调用render函数，进行第二次渲染。
//react写法
<div id="app"></div>
<script type="text/babel">
let name = "hello react"
render()
function btnClick() {
name = "hello 幽幽"
render()
}
function render() {
ReactDOM.render((
<div>
<h2>{name}</h2>
<button onClick={btnClick}>修改</button>
</div>
), document.getElementById("app"))
}
</script>
不知道大家有没有感觉这种写法有点麻烦，因为在写jsx代码的时候，所有东西都在一起，阅读性不高，接下来我教大家使用组件化开发，组件的首字母得大写哦，切记！
<div id="app"></div>
<script type="text/babel">
class App extends React.Component {
render() {
return (<div>hello react</div>)
}
}
ReactDOM.render(<App />, document.getElementById("app"))
</script>
数据管理，我们总不可能像上面一样，将render变成函数，然后每次改变数据后，重新手动调用吧？这样是非常消耗性能的，话不多说，让我们来看看，数据是怎么管理的，以及怎么改变它，然后自动刷新
<div id="app"></div>
<script type="text/babel">
class App extends React.Component {
constructor() {
super()
this.state = {
magges: "hello react"
}
}
render() {
return (
<div>
{this.state.magges}
<button onClick={e => this.btnClick()}>修改</button>
</div>
)
}
btnClick() {
this.setState({
magges: "hello 幽幽"
})
}
}
ReactDOM.render(<App />, document.getElementById("app"))
</script>
这里，我们将数据全部都保存在this.state中，然后想要修改数据，我们通过this.setState来修改，通过这个来修改数据，可以通知我们react，我们修改了数据，需要进行重新渲染，这里的事件绑定，需要注意this指向问题，我这里采用的是箭头函数，this是调用着的this，就是全局，app这个组件
最后，我们在来做一个案例（计数器），来巩固一下吧
<div id="app"></div>
<script type="text/babel">
class App extends React.Component {
constructor() {
super()
this.state = {
num: 0
}
}
render() {
return (
<div>
{this.state.num}
<button onClick={e => this.inbtn()}>+</button>
<button onClick={e => this.debtn()}>-</button>
</div>
)
}
inbtn() {
this.setState({
num: this.state.num + 1
})
}
debtn() {
this.setState({
num: this.state.num -1
})
}
}
ReactDOM.render(<App />, document.getElementById("app"))
</script>
