React学习笔记(一)

2015-10-22 | 分类: Javascript | 标签: Javascript React

1. 安装React环境

1 根据你的系统安装响应版本的nodenpm作为node的模块管理和发布工具,已跟随node一起安装。

2 通过npm install -g npmnpm 升级为最新版本。 (由于我大中华防火墙过于强大可以用Taobao提供的镜像来配置源)

3 在相关项目下安装reactreact dom

`npm install --save react react-dom`

4 安装BrowserifyBrowserify作为一个Javascript打包工具。 可以把类似node风格的require()方法以及其依赖打包为浏览器可读的代码以便在浏览器中运行。 类似工具还有webpack等根据个人喜好进行安装。

`npm install -g browserify`
browserify -t babelify main.js -o bundle.js

2. 整体理解 React

我们从一段很基础的HTML中对react进行一个整体的理解:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
	<script src="../build/react.js"></script>
	<script src="../build/react-dom.js"></script>
	<script src="../build/browser.min.js"></script>
</head>
<body>
	<script type="text/babel">
		var Hello = React.createClass({
			getInitialState: function () {
				return {
					opacity: 1.0
				};
			},
			getDefaultProps : function () {
				return {
					name: 'hello'
				};
			},
			propTypes: {
				name: React.PropTypes.string.isRequired,
			},
			componentDidMount: function () {
				this.timer = setInterval(function () {
					var opacity = this.state.opacity;
					opacity -= .05;
					if (opacity < 0.1) {
						opacity = 1.0;
					}
					this.setState({
						opacity: opacity
					});
				}.bind(this), 100);
			},

			render: function () {
				return (
					<div style=>
						Hello {this.props.name}
					</div>
					);
			}
		});

		ReactDOM.render(
			<Hello name="world"/>,
			document.body
			);
	</script>
</body>
</html>

a. 代码最开始加载三个库,react是React的核心库,react-dom提供与DOM相关的功能,browserjsx语法转化为javascript语法,这一步往往在服务器上完成。

b. ReactDOM.render()方法是react最基本的方法,将模板转为HTML语言,并插入指定DOM节点。

c. JSX语法(Javascript XML),让HTML,javascript可以混写,遇到HTML标签<开头就用HTML解析,遇到{开头就用Javascript规则解析,遇到{{开头就解析为CSS。JSX有严格的标准。

d. React.createClass()用于生成组件类,以上例子中变量Hello就是我们生成的组件类,模板插入<Hello />,就会自动生成一个Hello的实例。组件类通过render来输出组件。

e. 在生成组件类时,可以通过this.props定义组件属性。比如render上的name="world"就是我们的属性。在组件中可以通过this.props.name来读取!不过值得注意的是要避开javascript的保留字如class,for等。

f. 为了保证组件属性props的正确性,我们需要一种验证机制验证参数是否符合要求。可以通过PropTypes来验证。同样我们可以通过getDefaultProps来设置组件属性的默认值。

g. 组件免不了要和用户互动,一开始有一个初始值,互动就会导致状态发生变化。从而触发重新渲染UI。比如上例中,我们定义了this.state.opacity。并定义了一个定时机制每100ms就改变状态。this.setState方法就修改状态值。每次修改之后,就会自动调用render去重新渲染组件。由于 this.props 和 this.state 都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性。

y. 组件是有生命周期的。分为三个状态Mounting 已插入真实 DOM,Updating正在被重新渲染,unMounting已移出真实 DOM React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。

componentWillMount()

componentDidMount()

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

componentWillUnmount()

React 入门;