React
它允许我们只需要维护自己的状态，当状态改变时，React可以根据最新的状态去渲染我们的UI界面
开发React必须依赖三个库：
- eact：包含react所必须的核心代码
- react-dom：react渲染在不同平台所需要的核心代码
- babel：将jsx转换成React代码的工具
1、初识react
HelloWorld
注意：
- 这里我们编写React的script代码中，必须添加 type=“text/babel”，作用是可以让babel解析jsx的语法
- ReactDOM.render函数：
参数一：传递要渲染的内容，这个内容可以是HTML元素，也可以是React的组件
这里我们传入了一个h2元素，后面我们就会使用React组件
参数二：将渲染的内容，挂载到哪一个HTML元素上
这里我们已经提定义一个id为app的div - 变量不同于vue，这里使用的是{}
- function定义函数
- message发生改变之后要进行重新渲染
<!-- 导入资源 -->
<!-- crossorigin:远程的js脚本的错误打印出来 -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="app"></div>
<script type="text/babel">
// ReactDOM.render(渲染的内容 , 渲染的位置 )
let message = 'hello world'
function btnClick(){
message = 'hello react'
console.log(message)
render() // 重新渲染
}
const render = () => {
ReactDOM.render(
// 只能有一个根标签
<div>
<h1>{message}</h1>
<button onClick={btnClick}>改变文本</button>
</div>,
document.getElementById('app')
)
}
render() // 第一次渲染
</script>
组件化：
整个逻辑其实可以看做一个整体，那么我们就可以将其封装成一个组件：
我们说过 ReactDOM.render 第一参数是一个HTML原生或者一个组件；
所以我们可以先将之前的业务逻辑封装到一个组件中，然后传入到 ReactDOM.render 函数中的第一个参数；
这里我们暂时使用类的方式封装组件：
定义一个类（类名大写，组件的名称是必须大写的，小写会被认为是HTML元素），继承自React.Component
实现当前组件的render函数
render当中返回的jsx内容，就是之后React会帮助我们渲染的内容
<!-- 导入资源 -->
<!-- crossorigin:远程的js脚本的错误打印出来 -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="app"></div>
<script type="text/babel">
// 组件化-使用class定义
class App extends React.Component{
render(){
return (
<div>
<h1>hello world</h1>
</div>
)
}
}
ReactDOM.render(<App/> , document.getElementById('app'))
</script>
数据依赖：
数据在哪里定义？
参与界面更新的数据我们也可以称之为是参与数据流，这个数据是定义在当前对象的state中
我们可以通过在构造函数中 this.state = {定义的数据}，当我们的数据发生变化时，我们可以调用 this.setState 来更新数据，并且通知React进行update操作，在进行update操作时，就会重新调用render函数，并且使用最新的数据，来渲染界面。
// 定义构造函数 constructor(){ // 调用父类的构造函数 super() // 定义状态 this.state = { message: 'hello world' } }事件绑定中的this
在类中直接定义一个函数，并且将这个函数绑定到html原生的onClick事件上，当前这个函数的this指向的是谁呢？ 默认情况下是undefined 很奇怪，居然是undefined；因为在正常的DOM操作中，监听点击，监听函数中的this其实是节点对象（比如说是button对象）；这次因为React并不是直接渲染成真实的DOM，我们所编写的button只是一个语法糖，它的本质React的Element对象；那么在这里发生监听的时候，react给我们的函数绑定的this，默认情况下就是一个undefined；解决方法：我们就需要在传入函数时，给这个函数直接绑定this(使用bind)
**总结：**啦啦，今天对react有了一点点新的认识捏，从react的基本框架到绑定数据最后再到编写函数改变数据的值，让我一步一步揭开react的面纱，它的语法确实要灵活很多，组件化也体现了出来，很期待接下来的学习内容。