React18基础一

React是什么：

1. react是用于构建用户界面的javaScript库
2. react由Facebook来更新和维护,它是大量优秀程序员的思想结晶
3. react官网: React 官方中文文档 – 用于构建用户界面的 JavaScript 库

React特点：

1. 声明式编程:
   1. 只需要维护自己的状态,当状态改变时,React可以根据最新的状态去渲染我们的UI界面
2. 组件化开发:
   1. 将复杂的界面拆分成一个个小的组件
3. 多平台适配：
   1. 开发Web界面
   2. ReactNative 开发移动端跨平台 （不太推荐，不适合发展)
4. ReactVR 虚拟现实Web应用程序

开发React必须依赖三个库:

1. react: 包含react必须的核心代码
2. react-dom: react渲染在不同平台上所需要的核心代码
3. babel: 将jsx转换成react代码的工具

为什么要进行拆分?原因就是react-native:

1. 这三个库各司其职,每个库只单纯做自己的事情
2. react包含了react-web和react-native所共同拥有的核心代码
3. react-dom针对web和native所完成的事情不同:
   1. web端: react-dom会将jsx最终渲染成真实的DOM,显示在浏览器中
   2. native端: react-dom会将jsx最终渲染成原生的控件(比如Android中的Button,IOS中的UIButton)

babel是什么?

1. babel,又名babel.js
2. 俗称 编译器、转移器
3. 很多浏览器并不支持ES6的语法,但是确实ES6的语法非常的简洁和方便,我们开发时希望使用它
4. 编写源码时我们就可以使用ES6来编写,之后通过Babel工具,将ES6转成大多数浏览器都支持的ES5的语法

React和Babel的关系:

1. 默认情况下开发React其实可以不使用babel
2. 但是前提是我们自己使用React.createElement来编写源代码,它编写的代码非常的繁琐和可读性差
3. 那么我们就可以直接编写 jsx语法，并且让babel帮助我们转换成React.creatElement

React三个依赖库

1. react
2. react-dom
3. babel

案例: 

1. React18之前写法: 渲染hello react 

   1. 
          
      
      	// 原始引入需要在script里加type  
          
      

2. React18写法: 渲染hello react 

3. 点击事件改变内容，无论是点击事件还是赋值在react里都是一个大括号{}
   1. 
4. 优化点击事件改变内容,可以把渲染部分封装成一个函数,因为react不会立即更新界面需要手动更新界面
   1. 

    

5. 1