React简单入门

Posted 2021-01-03 2oex

React功能

React	功能
1	React是一个用于构建用户界面的javascript库
2	React主要用于构建UI,很多人认为React是MVC中的V(视图)
3	React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源
4	React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

特点

特点	介绍
声明式设计	React采用声明范式，可以轻松描述应用。
高效	React通过对DOM的模拟，最大限度地减少与DOM的交互。
灵活	React可以与已知的库或框架很好地配合。
JSX	JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
组件	通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
单向响应的数据流	React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

引入的库

<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

react.min.js --- React的核心库
react-dom.min.js --- 提供与 DOM 相关的功能
babel.min.js ---- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

注意：
如果我们需要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel。

jsx(React 使用 JSX 来替代常规的 JavaScript)

优点：
1. JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。

2. 它是类型安全的，在编译过程中就能发现错误。

3. 使用 JSX 编写模板更加简单快速。

虚拟Dom

1.节约资源
2.存放在内存中
3.会利用dom diff算法
4.高效

大小内存

寄存器(小) > 内存 > 硬盘

脚手架

全局安装：
npm install –-global create- react- app
初始化项目：
create- react- app myReactApp
启动服务：
	cd myReactApp 
    npm start

react

核心库

react-dom

高功能，客户端
做dom，在浏览器

渲染页面

react-native

上有一个web-view

native web

native 给一个浏览器就可以打开h5 app

manifest.json

暂存H5页面

ReactDOM.render(x,y) x: 挂载组件 y：挂载位置

webpack

historyApiFallback 重定向