React 特点
- 1.声明式设计 −React采用声明范式，可以轻松描述应用。
- 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
- 3.灵活 −React可以与已知的库或框架很好地配合。
- 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
- 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
- 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
- 7.react 的核心库就3000多行的代码，非常的轻量级。
使用方式
src 引入的方式
直接在页面上使用React，引用下面的JS
<!-- react 的核心库，不依赖任何的宿主环境 --> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <!-- react 浏览器的的库，直接与react相关 --> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- 如果使用jsx 的话，需要使用babel 来进行转移 --> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
为啥需要使用 crossorigin, src 本身是支持跨域的，但是如果不使用crossorigin 报错的提示会比较糟糕，不能正确定位到报错的位置，可以理解成代码地图。
使用原生开发方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>react 初探</title> </head> <body> <div id="root"> </div> </body> <!-- react 的核心库，不依赖任何的宿主环境 --> <!-- 为啥需要使用 crossorigin, src 本身是支持跨域的，但是如果不适用crossorigin 报错的提示会比较糟糕 --> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <!-- react 浏览器的的库，直接与react相关 --> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <script> let h1Dom = React.createElement('h1',{ title: '这是h1元素' },'h1 元素', React.createElement('span',{}, 'span 元素')) ReactDOM.render(h1Dom, document.getElementById('root')); </script> </html>
上面的原生我们发现，这样挂载的方式非常繁琐，而且一大堆的不方便，react 给我们提供了一套比较好的语法， jsx
React.createElement
创建一个React元素，称作虚拟DOM，本质上是一个对象
1.参数1：元素类型，如果是字符串，一个普通的HTML元素
2.参数2：元素的属性，一个对象
3.后续参数：元素的子节点
使用jsx 进行开发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>react 初探</title> </head> <body> <div id="root"> </div> </body> <!-- react 的核心库，不依赖任何的宿主环境 --> <!-- 为啥需要使用 crossorigin, src 本身是支持跨域的，但是如果不适用crossorigin 报错的提示会比较糟糕 --> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <!-- react 浏览器的的库，直接与react相关 --> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <!-- 引入babel 进行转译 --> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <!-- 这里的type 需要使用为text/babel, 告诉浏览器，这里的代码先不加载，交给babel转译后在加载 --> <script type="text/babel"> // let h1Dom = React.createElement('h1',{ // title: '这是h1元素' // },'h1 元素', React.createElement('span',{}, 'span 元素')) // 使用jsx let h1Dom = <h1 title='这是h1元素'>h1 元素 <span>span 元素</span> </h1> ReactDOM.render(h1Dom, document.getElementById('root')); </script> </html>
相比之下，jsx 比原生的react 自己创建虚拟节点的语法方便的多，和我们书写html 一样，但是要注意的是，jsx 就是一种语法，创建的dom 也是react 虚拟dom哦
