React 到底是什么

react: A JavaScript library for building user interfaces.(用户构建用户界面的JavaScript的库)

  • 用原生的JS开发网站或者页面的时候，会存在一些问题，比如：
    • DOM兼容性的问题
    • 过多兼容性代码的冗余
    • 代码组织和规范问题
  • 之前是jQuery是主流，但是现在的项目慢慢不会使用jQuery了，国内主要是vue和React
  • React起源：2013年，Facebook由于一个需求，所产生的bug，进而开源了这样一个JS的库，什么bug呢，就像微信右上角的消息数量的这种东西，多
    少条消息没有读，就要在右上角产生一个数字，之前就需要用DOM操作来改变这个数字，该功能上线之后总是会出现一些bug，比如有多个类似这样的功能
    后，过多的操作容易产生bug
  • 工程师开始思考：为什么这样一个简单的需求为什么总是会出现这样的问题呢？
    • 在传统开发模式中，我们过多地操作页面的细节（web端，Android，iOS）并且需要掌握和使用大量的DOM的API（jQuery也是要操作DOM的）
    • 关于数据（状态），往往会分散到各个地方，不方便管理和维护
  • 他们就在想：是否有一种新的模式来解决上面的问题
    • 以组件的方式去划分一个个功能模块
    • 组件内部以JSX来描述UI，用state来存储组件内的状态
    • 当应用的状态发生了改变，通过setState来修改状态，页面的UI根据render函数会自动发生更新

React 的特点

  • 声明式编程：只需要维护自己的状态，当状态发生改变，React就会根据最新的状态去渲染我们的页面，不用操作DOM了！
  • 组件化开发：把一个复杂的页面划分为一个个小的组件，如何合理地进行组件的划分是重点

class1_初体验 - 图1

  • 多平台适配：React开发之初主要是为了开发Web页面，2015年退出了ReactNative，用户开发移动端跨平台，2017年，Facebook推出ReactVR用于
    开发虚拟现实Web应用程序（5G的普及，VR会是一个火爆的场景）

React 开发（不用脚手架的情况）

  • 使用vue时，只需要引入一个vue.js文件即可，而React需要添加三个库才可以使用
    • react:包含React所必须的核心代码
    • react-dom:React渲染在不同平台所需要的核心代码
    • babel:将jsx转换为React代码的工具
  • 之前和vue一样，是在一个文件中的，后面拆分开了，各司其职
  • react-dom针对web和react-native所做的事情是不同的；
    • web端：react-dom会将jsx最终渲染成真是的DOM，显示在浏览器中；
    • native端：react-dom会将jsx最终渲染成原生的控件，（比如android中的button，iOS中的UIButton）
  • babel是什么呢？
    • 又叫babel.js，他是使用非常广泛的编辑器，转移器，比如当下很多浏览器都不支持ES6的新语法，但是确实ES6非常简洁和方便，我们开发时希望使用它；
    • 我们编写源码时就可以用ES6来编写，之后通过Babel工具，将ES6转成大多数浏览器都支持的ES5语法；
    • 如果react想要渲染一个东西，它里面有一个 React.renderElement(h2,…一些参数) 函数，这种方法开发起来会特别麻烦，现在我们使用jsx这种办法来解决它，如何解决呢？
    • jsx(JavaScript XML)：他是让我们用普通html的方式来开发我们的页面。然后通过babel工具将这种普通HTML的代码转为 renderElement() 这种方式，进而可以被react使用来生成虚拟DOM的，所以jsx只是一种语法糖；
  • 如何添加这三种依赖呢？
    • 通过CDN引入；
    • 下载后，本地引入；
    • 通过npm包管理（后续脚手架再使用）
  • 依赖如下
  1.     <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  2.     <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  3.     <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  • 一个简单的使用
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. <title>Document</title>
    8. <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    9. <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    10. <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    11. </head>
    12. <body>
    13. <div id="app"></div>
    14. <script type="text/babel">
    15.   ReactDOM.render(<h1>hello world</h1>, document.getElementById('app'))
    16. </script>
    17. </body>
    18. </html>