关于前端:前端开发之React框架入门学习

31次阅读

共计 1376 个字符，预计需要花费 4 分钟才能阅读完成。

装置 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);

代码解析：

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 中