细说React(一)
React 是近期非常热门的一个前端开发框架。 这篇文章将介绍如何使用 React 来创建用户界面,希望能够起到抛砖引玉的效果。
"React, A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES"
正如官网的介绍,一个框架,Just the UI。React的API相对于庞大Angular来说比较简单,但是精简的 API 不是意味着没有一定的学习成本,我们还是需要对此框架进行一定的理解。 闲话不多说,让我们进入正题。首先,让我们来了解下 React 中使用到的一些术语。
React 术语
-
React Elements
代表 HTML 元素的 JavaScript 对象。 这些 JavaScript 对象最后被编译成对应的 HTML 元素。
-
Components
封装 React Elements, 包含一个或者多个 React Elements。 Components 用于创建可以复用的 UI 模块,例如 分页,侧栏导航等。
-
JSX
JSX 是 React 定义的一种 JavaScript 语法扩展,类似于 XML 。 JSX 是可选的, 我们完全可以使用 JavaScript 来编写 React 应用, 不过 JSX 提供了一套更为简便的方式来写 React 应用。
-
Virtual DOM
Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象。 React 使用 Virtual DOM 来渲染 UI, 同时监听 Virtual DOM 上数据的变化并自动迁移这些变化到 UI 上。
-
DOM Diff
React中最神奇的部分莫过于虚拟DOM,以及其高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面,由虚拟DOM来确保只对界面上真正变化的部分进行实际的DOM操作。
DEMO 环境准备
首先,在 React Download 页面 下载 Starter Kit,解压到某个地方。
进入到解压后的 build
目录,新建一个 index.html
文件,并且引用 react.js
, react-dom.js(0.14版本之前react和react-dom没有分家,0.14之后将两者分开,react-dom只提供了一个渲染的方法)和 JSXTransformer.js(官方现不建议使用JSXTransformer.js,建议使用babel,配合ES6,写起来非常爽)
后就可以开始编写 React 应用了。需要注意如果使用 JSX, 那么 script
标签的 type
应该更改为 text/jsx
。
<html> <head> <meta charset="utf-8" > <title>demo</title> </head> <body> <script src="react.js"></script>
<script src="react-dom.js"></script> <script src="JSXTransformer.js"></script> <script type="text/jsx" src="app.js"></script> </body> </html>
第一个 React Element
创建一个 Element 只需调用 React.createElement
方法,并传入元素信息即可。例如:
var div = React.createElement('div', null, "Hello React");
// 使用 JSX
var div = <div>Hello React</div>
创建之后就可以调用 React.render
方法渲染到页面上:
ReactDOM.render(div, document.body);
第一个 React Component
React Component 抽象出相同 UI 组件的结构和逻辑。 通过调用 React.createClass
方法来创建一个 Component,并传入一个带有 render
方法的对象类型的参数。
var HelloMessage = React.createClass({
render: function () {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(<HelloMessage name="iissnan" />, document.body);
我们看到 React.createClass
接收了一个对象,并将这个方法返回赋值给 HelloMessage
, 最后调用 ReactDOM.render
方法将这个新建的 Component 渲染到页面上。从这个例子看来,一个 Component 与 Element 并无太大的差别。 事实上, Component 已经准备好了,我们可以增添一些结构和功能来扩展这个 Component 。
Props
在上一个例子中,可以看到有一个特殊的引用: this.props.name
。 这个引用称之为 Props
,可以将他想象成 Component 的设置选项。
在使用上, Props
类似于 HTML 中的属性:
ReactDom.render(<HelloMessage name="foo" />, document.body);
在 Component 内部,通过 this.props.name
来引用这个 Props
:
var HelloMessage = React.createClass({
render: function () {
return <div>Hello {this.props.name}</div>;
}
});
需要注意的是, Props 仅用来定制 Component, 这些数据不应该被改动。 如果涉及到需要做改动的数据, 得考虑使用state
。
Stateful Component
State 数据代表 Component 的状态, 用于维护 Component 内部的状态。 当 State 发生改变之后, React 将会重新渲染 UI 。调用 与 Props
类似, State 数据通过 this.state
访问:
var Greeting = React.createClass({
getInitialState: function () {
return { greeted: false };
},
greet: function () {
this.setState({
greeted: true
});
},
render: function () {
var response = this.state.greeted ? 'Hi' : '';
return (
<div>
<div>Hello {this.props.name}</div>
<span>{response}</span>
<button onClick={this.greet}>Hi</button>
</div>
);
}
});
ReactDOM.render(<Greeting name="foo" />, document.body);
这个例子中加了几个函数,我们一一来看下。 首先是 getInitialState
, 这个方法在 Component 初始化的时候被调用, 返回 Component 初始时的状态数据。例子中,我们设置了 Component 初始时的 greeted
为 false
。
然后是 greet
方法,这个方法被调用之后将修改状态数据 greeted
为 true
。
当 State 发生改变后, React 将 Component 渲染到 Virtual DOM,新的 Virtual DOM 与 旧版本的进行比对,检查出改变的部分并更新浏览器的 DOM。 在这个例子中,当按钮被点击后, greeted
状态数据发生了变化,UI 跟随着更新。
组合
结合 Props 和 State,我们就可以使用 Component 来创建完整的应用。
var Greeting = React.createClass({ getInitialState: function () { return { greeted: false }; }, greet: function () { this.setState({ greeted: true }); }, render: function () { var response = this.state.greeted ? 'Hi' : ''; return ( <div> <div>Hello {this.props.name}</div> <span>{response}</span> <button onClick={this.greet}>Hi</button> </div> ); } }); var users = ["foo", "bar", "baz"]; var GreetingApp = React.createClass({ render: function () { var greetings = this.props.users.map(function (user) { return <Greeting name={user} />; }); return <div>{greetings}</div>; } }); ReactDOM.render(<GreetingApp users={users} />, document.body);
最后
打个小广告,github上提供demo演示,项目地址--react学习,欢迎star!希望能对你有所帮助!