开新坑啦！(超大声哔哔)
一： react介绍
react 是由Facebook于2013年开源的一个js库(私以为框架更合适)，提倡all in js , 作为世界流行前三的框架，具有以下特点：
- 声明式编程
UI = f(state)
开发者不关心ui界面，而是注重页面逻辑，ui跟随state变化
- 组件化开发
继承自React.Component的实例可以完成单实例开发
- 多平台适配
2013年开源时仅适配web端；
2015年开源的react-native支持app端
2017年开源的react-VR支持基于5G的vr
小程序端也可以使用基于react本身的taro框架开发
react的亮点在于虚拟DOM和diff算法，这个先挖个坑
二：react依赖
使用基于react开发需要引入三个库：
1.react-core : react核心代码，开发各种都必备的
- react-dom：react渲染在不同客户端时所需要的核心代码
react在不同客户端所渲染的样式也有不同
web端： react会将jsx最终渲染成真实DOM，并显示在浏览器中
native端：react会将jsx最终渲染成客户端原生控件，比如Android的button,IOS的UIButton
- babel.js：这个是可选的，作用在于将jsx代码转换编译成react.createElement()编译后的代码，但react原生的ract.createElement写法太过繁琐且可读性差，因此更推荐使用jsx
jsx: JavaScript XML 语法糖 是JavaScript的增强版本
三. CDN引入
<!--body -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
crossorigin:允许脚本被跨域访问
PS: 读者也可以将其下载到本地进行使用，cdn连接时间可能很长
四：小案例-> 点击切换文字
需求： 点击文本时，改变p标签以及btn内容
<body>
<div id="app">app</div>
<script src="./react-core/react-core.js"></script>
<script src="./react-core/react-dom.js"></script>
<script src="./react-core/babel.js"></script>
<!-- 如果使用jsx，script必须加text/babel的type -->
<script type="text/babel">
class App extends React.Component{
constructor(){
super()
this.state = {
message: 'hello,world',
btnText:'按钮'
}
}
render() {
return (
<div>
<p>{this.state.message}</p>
<button onClick={this.btnClick.bind(this)}>{this.state.btnText}</button>
</div>
)
}
btnClick(){
console.log(11111111);
this.setState({
message:'已更改',
btnText: '已点击'
})
}
}
ReactDOM.render(<App />,document.getElementById('app'))
</script>
</body>
接下来从头到尾开始讲解步骤以及注意事项
整个过程共分为三步：
- 继承组件
- 编写jsx
- 挂载、渲染组件到页面
1. 继承组件
继承自React.Component的APP子类，
内部的constructor方法会初始化子类本身私有数据，
es6规定extends必须要在constructor内部初始化一次super()函数用以初始化父类数据，
this.state对象是react规定的一个对象，
想要页面实时更新数据必须要在该对象内定义响应式数据(如：this.state.xxx)，然后使用this.setState({})更改数据；
render方法是react规定的用于编写jsx代码的函数，该方法必须存在(如果想写jsx)，且不可更改
子类响应式属性必须写在this.state中，子类的方法应写在子类内部，且，由于在jsx中的this找不到，因而暂时在函数后加bind方法重新绑定this
2. 编写jsx
jsx应该在render方法内部写，且render方法应return 为了表示这是一个整体，应该加小括号表示。
jsx最外层应只有一个根元素， 区别于vue,react的响应式只有一个大括号，且要声明的响应式数据应该是this.state.xxx ，点击事件名外部也应该由单大括号包裹(类似小程序)
子类响应式属性必须写在this.state中，子类的方法应写在子类内部，且，由于在jsx中的this找不到，因而暂时在函数后加bind方法重新绑定this
jsx所触发的事件写在继承子类内部，与render、constructor并列
3. 挂载、渲染组件到页面
最后在APP外部使用ReactDOM.render(
ReactDOM.render: 负责将指定的组件或者jsx渲染到页面指定id上，且执行后会将原标签app的内容全部覆盖成APP组件的内容
另: 需要开发者极为注意大小写，主要在于React.Component，onClick，ReactDOM...
这个就是最近两日的个人心得，不足之处请多多指教
以上。