React学习笔记(一)

Posted on | In
15年学了react，这么早呀

1. 安装React环境

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

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

3 在相关项目下安装react和react dom

`npm install --save react react-dom`

4 安装Browserify。 Browserify作为一个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相关的功能，browser将jsx语法转化为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 入门;