标签：react 入门 DOM Virtual React UI 组件 前端开发

安装React

npm i -S react react-dom

react：react 是React库的入口点

react-dom：提供了针对DOM的方法，比如：把创建的虚拟DOM，渲染到页面上

 

什么是React

React框架的开发中心思想就是封装组件，以组件为核心而不是MVC，原因是 Facebook任务，当时（2013年以前）的前端框架都前端培训不是前端工程师真正想要的。因此React框架：

1.用来构建UI的 JavaScript库

2.React 不是一个 MVC 框架，只工作在View层

还记得jQuery的时代大家，先通过 DOM找到元素再去更改 UI。React 的基本工作方式与此类似，不对的是通过虚拟Dom改善了传统原生Dom操作的性能问题，同时通过数据绑定解决了【选择器】不厌其烦地来回查找某个 DOM 元素的尴尬。

React框架 大体包含下面这些概念：

1.组件

2.JSX

3.Virtual DOM

4.Data Flow

Hello React

让我们通过一个经典的例子看看React是怎么工作的：

import React, { Component } from 'react';

import { render } from 'react-dom';

class HelloReact extends Component {

render() {

return <div>Hello {this.props.name}</div>;

}

}

// 加载组件到 DOM 元素

mountNoderender(<HelloReact name="Rick" />, mountNode);

代码解析：

1. React 应用都是构建在组件之上。

上面的 HelloReact 就是一个 React 构建的组件，最后一句 render 会把这个组件显示到页面上的某个元素 mountNode 里面，显示的内容就是 <div>Hello Rick</div>。

props 看作是组件的配置属性，在组件内部是不变的，只是在调用这个组件的时候传入不同的属性（比如这里的 name）来定制显示这个组件。

2.JSX

从上面的代码

mountNoderender(<HelloReact name="Rick" />, mountNode);

可以看到将 HTML 直接嵌入了 JS 代码里面，这个就是 React 提出的一种叫 JSX 的语法，请注意<HelloReact name="Rick" />没有引号标明是一个文本。

核心Virtual DOM

Dom的工作模式参见JQ，但是元素的DOM操作效率丰富低，不适用与高端动态的现代前端编程。所以 React 实现了一个Virtual DOM，组件 DOM 结构就是映射到这个 Virtual DOM 上，React 在这个 Virtual DOM 上实现了一个 diff 算法，当要重新渲染组件的时候，会通过 diff 寻找到要变更的 DOM 节点，再把这个更新到浏览器实际的 DOM 节点上的UI控件，所以实际上不是真的渲染整个 DOM 树。这个 Virtual DOM 是一个纯粹的 JS 数据结构，所以性能会比原生 DOM 快很多。

VituralDOM的处理方式：

1.用 JavaScript 对象结构表示 DOM 树的结构，然后用这个树构建一个真正的 DOM 树，插到Docment中

2. 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异

3. 把2所记录的差异应用到步骤1所构建的真正的DOM树上，UI视图就更新了

标签：react,入门,DOM,Virtual,React,UI,组件,前端开发
来源： https://blog.csdn.net/m0_58371965/article/details/121487076

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。