您的位置：首页 > Web前端 > React

React 入门介绍

2017-02-02 22:25 302 查看

react 是什么？

React是Facebook开源的一个用于构建用户界面的Javascript库,React专注于MVC架构中的View层，即视图层。

应用React时，应从UI出发抽象出不同的组件，对组件进行拼装。react 适合构建大规模应用程序，通过 React 你唯一要做的事情就是构建组件。

React有良好的封装性，组件使代码复用、测试和关注分离（separation of concerns）更加简单。

react 中的 Virtual DOM(虚拟DOM)

因为过多DOM操作会让应用程序变得很慢，并且很笨拙，在React中抽象出来了虚拟dom，在每次需要渲染时，会先比较当前DOM内容和待渲染内容的差异，

然后再决定如何最优地更新DOM。这个过程被称为reconciliation。

如何理解虚拟DOM

在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，

然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。

而且React能够批处理虚拟 DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，然后又从B变成A，

React会认为UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，

而对实际DOM进行操作的仅仅是 Diff部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，

而只需要关心在任意一个数据状态下，整个界面是如何Render的。

React组件化

对于React而言，开发者从功能的角度出发，将UI分成不同的组件，每个组件都独立封装。

在React中，你按照界面模块自然划分的方式来组织和编写你的代码，对于评论界面而言，

整个UI是一个通过小组件构成的大组件，每个组件只关心自己部分的逻辑，彼此独立。

React中定义组件的方式

① ReactDOM.render

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('elementId')
);

② ES5方式定义组件

"use strict";

var HelloMessage = React.createClass({
displayName: "HelloMessage",

render: function render() {
return React.createElement(
"div",
null,
"Hello ",
this.props.name
);
}
});

ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

③ 在Jsx中定义组件

var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});

ReactDOM.render(<HelloMessage name="John" />, mountNode);

④ ES6中定义组件

import './Hello.css';
import './Hello.scss';

import React, {Component} from 'react';

// 内联样式
let style={
backgroundColor:'blue'
}

export default class Hello extends Component {
constructor(props) {
super(props);
this.state = { count: 'es6'};
}
render() {
return (
<div>
<h1 style={style}>Hello world{this.state.count}</h1>
<br/>
<image/>
</div>
)
}
}

jsx语法介绍

HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。

实质上这只是一个语法糖，每一个 XML标签都会被JSX转换工具转换成纯Javascript代码，当然你想直接使用纯Javascript代码写也是可以的，

只是利用JSX，组件的结构和组件之间的关系看上去更加清晰。

JSX 的基本语法规则：

遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员。

如：

var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];

ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);