React 入门（1）简介

序言

为什么要学习React？

组件化方面

1. 什么是模块化：是从代码的角度来进行分析的；把一些可复用的代码，抽离为单个的模块；便于项目的维护和开发；

2. 什么是组件化：是从UI 界面的角度来进行分析的；把一些可服用的UI元素，抽离为单独的组件；便于项目的维护和开发；

3. 组件化的好处：随着项目规模的增大，手里的组件越来越多；很方便就能把现有的组件，拼接为一个完整的页面；

4. Vue是如何实现组件化的：通过 .vue文件，来创建对应的组件；

  • template 结构
  • script 行为
  • style 样式

5. React如何实现组件化：大家注意，React中有组件化的概念，但是，并没有像vue这样的组件模板文件；React中，一切都是以JS来表现的；因此要学习React，JS要合格；ES6 和 ES7 （async 和 await） 要会用；

React中几个核心的概念

虚拟DOM（Virtual Document Object Model）

DOM的本质是什么

　　浏览器中的概念，用JS对象来表示 页面上的元素，并提供了操作 DOM 对象的API；

什么是React中的虚拟DOM

　　是框架中的概念，是程序员 用JS对象来模拟 页面上的 DOM 和 DOM嵌套；

为什么要实现虚拟DOM（虚拟DOM的目的）

　　为了实现页面中， DOM 元素的高效更新

DOM和虚拟DOM的区别：

　　DOM：浏览器中，提供的概念；用JS对象，表示页面上的元素，并提供了操作元素的API；

　　虚拟DOM：是框架中的概念；而是开发框架的程序员，手动用JS对象来模拟DOM元素和嵌套关系；

　　　　本质： 用JS对象，来模拟DOM元素和嵌套关系；

　　　　目的：就是为了实现页面元素的高效更新；

Diff算法

diff 作为 Virtual DOM 的加速器，其算法上的改进优化是 React 整个界面渲染的基础和性能保障，同时也是 React 源码中最神秘、最不可思议的部分。本节依然从源码入手，深入剖析 diff 的不可思议之处。

React 中最值得称道的部分莫过于 Virtual DOM 模型与 diff 的完美结合，特别是其高效的diff 算法，可以让用户无需顾忌性能问题而“任性自由”地刷新页面，让开发者也可以无需关心Virtual DOM 背后的运作原理。因为 diff 会帮助我们计算出 Virtual DOM 中真正变化的部分，并只针对该部分进行原生 DOM 操作，而非重新渲染整个页面，从而保证了每次操作更新后页面的高效渲染。因此， Virtual DOM 模型与 diff 是保证 React 性能口碑的幕后推手。

diff 算法也并非其首创。正是因为该算法的普适度高，就更应该认可 React 针对 diff 算法优化所做的努力与贡献，这更能体现 React 创作者们的魅力与智慧！

 Hello, world

你也可以直接使用 Staticfile CDN 的 React CDN 库，地址如下：

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

官方提供的 CDN 地址：

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
View Code

以下实例输出了 Hello, world!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);
</script>
 
</body>
</html>
View Code

实例解析：

实例中我们引入了三个库： react.min.js 、react-dom.min.js 和 babel.min.js：

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

以上代码将一个 h1 标题，插入 id="example" 节点中。

注意：

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

在项目中使用 react

运行 cnpm i react react-dom -S 安装包

  • react： 专门用于创建组件和虚拟DOM的，同时组件的生命周期都在这个包中

  • react-dom： 专门进行DOM操作的，最主要的应用场景，就是ReactDOM.render()

资料

https://babeljs.io/docs/en/babel-cli/

React 入门实例教程

阮一峰的网络日志

posted @ 2020-03-27 16:19  ~沐风  阅读(188)  评论(0)  编辑  收藏  举报