小白学react （初次使用）

来源：互联网发布：摩卡软件招聘编辑：程序博客网时间：2024/06/15 18:56

1.学习地址

* http://book.51cto.com/art/201505/476392.htm 引领未来的前端开发框架

* http://blog.csdn.net/finish_dream/article/details/52304276 浏览器内部工作原理

React 是什么，为什么要使用它

React 是Facebook 内部的一个JavaScript 类库，已于2013 年开源，可用于创建Web 用户交互界面。它引入了一种新的方式来处理浏览器DOM。那些需要手动更新DOM、费力地记录每一个状态的日子一去不复返了——这种老旧的方式既不具备扩展性，又很难加入新的功能，就算可以，也是冒着很大的风险。React 使用很新颖的方式解决了这些问题。你只需声明式地定义各个时间点的用户界面，而无须关心在数据变化时需要更新哪一部分DOM。在任何时间点，React 都能够以最小的DOM 修改来更新整个应用程序。

React 本质上是一个“状态机”，可以帮助开发者管理复杂的随着时间而变化的状态。它以一个精简的模型实现了这一点。React 只关心两件事：

1. 更新DOM

2. 响应事件

React 赢就赢在最小化了重绘，并避免了不必要的DOM 操作，这两点都是公认的性能瓶颈。

一个实例初次被创建时所调用的生命周期方法与其他各个后续实例被创建时所调用的方法略有不同。当你首次使用一个组件类时，你会看到下面这些方法依次被调用：

getDefaultProps

getInitialState

componentWillMount

render

componentDidMount

对于该组件类的所有后续应用，你将会看到下面的方法依次被调用。注意，getDefaultProps方法已经不在列表中。

getInitialState

componentWillMount

该方法会在完成首次渲染之前被调用。这也是在render 方法调用前可以修改组件state 的最后一次机会。

render

在这里你会创建一个虚拟DOM，用来表示组件的输出。对于一个组件来说，render 是唯一一个必需的方法，并且有特定的规则。render 方法需要

满足下面几点：

* 只能通过this.props 和this.state 访问数据。

* 可以返回null、false 或者任何React 组件。

* 只能出现一个顶级组件（不能返回一组元素）。

componentDidMount

在render 方法成功调用并且真实的DOM 已经被渲染之后，你可以在componentDidMount内部通过this.getDOMNode() 方法访问到它。

这就是你可以用来访问原始DOM 的生命周期钩子函数。比如，当你需要测量渲染出DOM元素的高度，或者使用计时器来操作它，亦或运行一个自定义的jQuery 插件时，可以将这些操作挂载到这个方法上。

举例来说，假设需要在一个通过React 渲染出的表单元素上使用jQuery UI 的Autocomplete插件，则可以这样使用它：

// 需要自动补全的字符串列表  
var datasource = [...];  
var MyComponent = React.createClass({  
render: function () {  
return <input ... />;  
},  
componentDidMount: function () {  
$(this.getDOMNode()).autocomplete({  
sources: datasource  
});  
}  
});

注意，当React 运行在服务端时，componentDidMount 方法不会被调用。

存在期

随着应用状态的改变，以及组件逐渐受到影响，你将会看到下面的方法依次被调用：

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

最后，当该组件被使用完成后，componentWillUnmount 方法将会被调用，目的是给这个实例提供清理自身的机会。

反模式：把计算后的值赋给state

值得注意的是，在getInitialState 方法中，尝试通过this.props 来创建state 的做法是一种反模式。React 专注于维护数据的单一来源。它的设计使得传递数据的来源更加显而易见，这也是React 的一个优势。

上文提到从props 中计算值然后将它赋值为state 的做法是一种反模式。比如，在组件中，把日期转化为字符串形式，或者在渲染之前将字符串转换为大写。这些都不是state，只能够在渲染时进行计算。

当组件的state 值和它所基于的prop 不同步，因而无法了解到render 函数的内部结构时，可以认定为一种反模式。

// 反模式：经过计算后值不应该赋给state  
getDefaultProps: function() {  
return {  
date: new Date()  
};  
},  
getInitialState: function() {  
return {  
day: this.props.date.getDay()  
}  
},  
render: function() {  
return <div>Day: {this.state.day}</div>;  
}

正确的模式应该是在渲染时计算这些值。这保证了计算后的值永远不会与派生出它的props值不同步。

// 在渲染时计算值是正确的  
getDefaultProps: function() {  
return {  
date: new Date()  
};  
},  
render: function() {  
var day = this.props.date.getDay();  
return <div>Day: {day}</div>;  
}

然而，如果你的目的并不是同步，而只是简单的初始化state，那么在getInitialState 方法中使用props 是没问题的。只是一定要明确你的意图，比如为prop 添加initial 前缀。

getDefaultProps: function () {  
return {  
initialValue: 'some-default-value'  
};  
},  
getInitialState: function () {  
return {  
value: this.props.initialValue  
};  
},  
render: function () {  
return <div>{this.props.value}</div> 
}

0 0