一、React是什么

React是一个用于构建用户界面的JavaScript库

二、React能干什么

可以通过组件话的方式构建快速响应的大型web应用程序

三、React如何干的

1,声明式

1
2
ReactDOM.render(<h1>hello</h1>, document.getElementById('root'))
声明式渲染:我们只需要告诉程序我们想要什么样的效果,其他的交给程序来做。

2,组件化

组件化把页面拆分成一个个组件,方便视图的拆分和复用,还可以做到高内聚和低耦合

3,一次学习,到处编写,跨平台

可以使用React开发Web,Android,IOS,VR和命令行程序

四、React的优缺点

优点:开发团队和社区强大,API比较简洁,一次学习,随处编写

缺点:没有官方系统解决方案(选型麻烦),造型成本高,过于灵活,不容易写出高质量的应用

五、为什么React会引入JSX

分析:

  • 解释JSX是什么
  • 想实现的目的是什么
  • 有哪些方案可选,为什么这个方案最好
  • JSX的工作原理

什么是JSX

JSX是一个JavaScript的语法扩展,长得像HTML,但并不是HTML,JSX可以很好的描述UI应该呈现出它应有交互的本质形式。

JSX其实是React.creatElement的语法糖。

React想实现的目的

  • 需要实现声明式
  • 代码结构需要非常清晰和简介,可读性强
  • 结构、样式和事件等能够实现高内聚低耦合,方便重用和组件
  • 不想引入新的概念和语法,只写JavaScript

为什么JSX最好

Vue.js使用了基于HTML的模板语法,允许开发者声明式的将DOM绑定至底层Vue实例的数据。

其他的引入了太多的概念,比如Angular就引入了控制器,作用一,服务的等概念。

JSX工作原理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
JSX
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class Header extends Component {
render () {
return (
<div>
<h1 className='title'>React 小书</h1>
</div>
)
}
}

ReactDOM.render(
<Header />,
document.getElementById('root')
)
//编译之后
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class Header extends Component {
render () {
return (
React.createElement(
"div",
null,
React.createElement(
"h1",
{ className: 'title' },
"React 小书"
)
)
)
}
}

ReactDOM.render(
React.createElement(Header, null),
document.getElementById('root')
);
编译的过程会把类似HTML的JSX结构转换成JavaScript的对象结构
React.creatElement会构建一个JavaScript对象来描述你HTML结构的信息,包括包括标签,属性,还有子元素等。这样的代码尽就是合法的JAvaScript代码了,所以使用React和JSX的时候一定要经过编译的过程。
ReactDOM.render功能就是把组件渲染并且构造DOM树,然后插入到页面某个特定的元素上

JSX到页面经历的过程

五、虚拟DOM的优缺点

优点

  • 处理了浏览器兼容问题,避免用户操作真实DOM,那么又麻烦又容易出错。
  • 内容经过了XSS处理,可以防范XSS攻击。
  • 容易实现跨平台开发Android,IOS,VR应用。
  • 更新的时候可以实现差异化更新,减少更新DOM的操作

缺点

  • 虚拟DOM需要消耗额外的内存。
  • 首次渲染其实并不一定会更快。