序言

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

相关文章: