前言
React是一个用来动态构0建用户界面的JavaScript库（只关注于视图）。它可以帮助开发人员轻松地创建复杂的交互式界面，以及管理与用户交互的状态。相比于其他的JavaScript框架，React采用了一种不同的编程模型，称为“组件化编程模型”。这种模型使得组件具有高度的可重用性和可维护性，从而使得开发人员可以更加高效地开发出高质量的应用程序。在本笔记中，我将进行一步步的React学习，包括它的基本概念和用法。
React与Vue的区别
首先，我已经学习完了Vue并做了几个项目，在学习React之前，先了解了一下React与Vue的区别：
- 数据绑定方式不同：Vue使用双向数据绑定，React使用单向数据流。
- 组件化实现方式不同：Vue使用模板语法实现组件化，React使用JSX语法实现组件化。
- 生命周期管理方式不同：Vue提供beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed等生命周期函数；React提供componentWillMount、componentDidMount、componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、componentDidUpdate、componentWillUnmount等生命周期函数。
- 数据管理方式不同：Vue提供Vuex进行数据管理，React则需要使用像Redux这样的库来管理数据。
- 性能优化方式不同：Vue使用虚拟DOM和基于依赖追踪的渲染优化，React也使用虚拟DOM和shouldComponentUpdate的优化方式。
- 模板渲染方式不同：Vue使用模板编译，React使用JSX语法。
- 项目构建方式不同：Vue提供CLI工具Vue-CLI，React提供Create-React-App。
React的特点
1.采用组件化模式、声明式编码，提高开发效率及组件复用率。
2.在React Native中可以使用React语法进行移动端开发。
3.使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。
前置知识
学习react有一定的前置知识要求，相对于vue来说没有那么好入门
- 判断this的指向
- class(类）
- ES6语法规范
- npm包管理器
- 原型、原型链
- 数组常用方法
- 模块化
HELLO REACT
导包时，必须先导入react核心库，再导入react周边库和babel，顺序不能错！
jsx语法的script中必须注明babel
且jsx语法中的虚拟DOM内容不要加引号
易错点：
- 忘记准备“容器”，无DOM结点怎么往里面放呢
- 虚拟DOM内容加了引号
如果要加两个虚拟DOM，不能这样子写，框起来的语句不是追加动作而是覆盖动作。
为什么react要求使用jsx而不能使用js？
首先看实现以下效果的jsx和js方法：
jsx方法：
js方法
如果说要在h1里嵌套一个span的话，更明显的区别就出来了
jsx：
js：
而babel的机制就是把jsx转换成了js写法，方便了开发者。
虚拟dom和真实dom
虚拟dom和真实dom的打印结果分别是：
直接用console.log打印出来无法看到dom的属性
所以我们要加一个debugger进来来查看
所以能得出以下结论：
