React中虚拟DOM与JSX详解

一、React使用了虚拟DOM

1.虚拟DOM

在React中使用了虚拟DOM，没有使用浏览器的正式DOM，而是构建了真实DOM的虚拟表示，所谓“虚拟表示”指的是“真实DOM”的JavaScript对象树，在React中我们不直接操纵DOM，而是必须操作虚拟DOM，并让React负责更改浏览器DOM。

2.为什么不修改真实DOM

状态很难跟踪：追踪DOM现在和之前状态并将其操作为需要的形式会变的很困难

性能低：修改真实DOM是一个代价高昂的操作，且每次变化时都会修改DOM会导致性能显著下降

3.什么是虚拟DOM

虚拟DOM指的是实际DOM的JavaScript对象树

虚拟DOM：虚拟DOM编码时，就好像每次更新都需要重新创建整个DOM一样，我们只需要返回需要的DOM

使用了高效的差异算法，以了解发生了哪些变化

会同时更新DOM的子树

批量更新DOM

4.虚拟DOM片段

React的虚拟DOM是一个由ReactElement组成的JavaScript树

5.ReactElement

ReactElement是虚拟DOM中DOM元素的表示

6.ReactElement创建虚拟DOM

React需要我们提供一个虚拟DOM，React会把他们变成一个真实DOM树

var newDom = React.createElement('b')

创建了一个ReactElement的实例，但他没被React渲染到实际DOM树中

7.渲染真实DOM

使用ReactDOM.render(虚拟树的根节点、我们希望React写入实际浏览器DOM的挂载位置)

8.使用子组件来添加文本

React.createElement(DOM元素类型，元素的props属性，元素的子元素)

DOM元素的子元素必须是ReactNode对象，它可以是以下任意一种

ReactElement

字符串或数字（ReactText对象）

ReactNode数组

ReactDOM.render(React.createElement('b',null,'你好，react'),document.getElementById('root'))

9.ReactDOM.render()

将虚拟树转变成真实DOM

React不仅可以渲染到浏览器的DOM中，而且还可用于在其他框架（如移动端等）中渲染视图，该树被渲染为原生移动视图

ReactDOM.render()函数接收第三个参数是在组件更新/渲染后执行的回调参数，可以使用此回调作为应用程序启动后运行函数的方法

ReactDOM.render(React.createElement('b',null,'你好，react'),document.getElementById('root'),function(){

React应用程序已被渲染或更新

})

二、JSX

1.使用JSX创建元素

使用JSX时，它会替我们处理好创建ReactElement对象的工作

var newDom = <b>你好，react</b>等价于React.createElement('b',null,'你好，react')

JSX解析器将读取该字符串并为我们调用React.createElement函数

在JSX中可以使用自己定义的react组件，react组件统一HTML标签之间的唯一区别就是在于命名，HTML标签以小写字母开头，二react组件必须以大写字母开头

HTML标签

const htmlElement = (<div>html</div>)

React组件

const Message = props = (<div>{props.text}</div>)

使用带有Message标签的React组件

const reactComponent = (<Message text='react' />)

在用浏览器加载JSX之前，我们会使用预处理构建工具将它转成JavaScript，对于浏览器来说他接收的依旧是JavaScript语言

2.JSX属性表达式

为了在组件中使用JavaScript表达式，我们需要将其包裹在{ }中，而不是''，

3.JSX子条件表达式

进行组件的切换

const Menu = （<ul>{log ? <A/> : <B/>}</ul>）

4.JSX布尔属性

<input name = 'Name' disable = { 变量 } />

5.JSX扩展语法

const props = { mag : 'hello' , recipient : world }

<Component { ...props } />

等价于

<Component msg = { "hello" } recipient = { "world" }/>

6.JSX陷阱

class与className

JSX与JavaScript密切相关，所以一些关键字会冲突，例如：class、for等，所以我们在JSX中用className作为类的标识，工作方式与HTML中的class属性类似

使用classnames管理className

用htmlFor代替for

HTML实体与表情符号

data-

7.总结

JSX只是调用React.createElement的语法糖