React - sgg

逝者如斯夫，不舍昼夜。 --《论语》

讲师：张天禹

001_React 简介

1. 是什么？

用于构建用户界面的 JavaScript 库。

2. 谁开发的？

由 Fackbook 开发，且开源。

1. 起初由 Facebook 的软件工程师 Jordan Walke 创建。
2. 于 2011 年部署于 Facebook 的 newsfeed。
3. 随后在 2012 年部署于 Instagram。
4. 2013 年 5 月宣布开源。 ......

近十年 “陈酿” React 正在被腾讯、阿里等一线大厂广泛使用。

3. 为什么要学？（痛点）

1. 原生JavaScript操作DOM繁琐、效率低（DOM-API操作UI）。
2. 使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。
3. 原生JavaScript没有组件化编码方案，代码复用率低。

4. React的特点

1. 采用组件化模式、生命是编码，提高开发效率及组件复用率。
2. 在 React Native 中可以使用 React 语法进行移动端开发。
3. 使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。

5. JavaScript基础知识

1. 判断this的指向
2. class（类）
3. ES6语法规范
4. npm包管理器
5. 原型、原型链
6. 数组常用方法
7. 模块化

002_hello React 实例

• babel：可以将 ES6 转换成 ES5，将 jsx 转换成 js
• react.js: React 核心库
• react-dom.js: React 扩展库，用于支持react操作DOM

003_创建虚拟DOM的两种方式

第一种：jsx

const VDOM = <h1>使用jsx创建</h1>
ReactDOM.render(VDOM, document.getElementById('root'))

第二种：js

const VDOM = React.createElement('h1', {id: 'title'}, 'hello react')
ReactDOM.render(VDOM, document.getElementById('root'))

可以说 jsx 是 原生js实现方式的语法糖。

004_