生命周期相关函数
生命周期共提供了10个不同的API。
1.getDefaultProps
作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。
2.getInitialState
作用于组件的实例，在实例创建时调用一次，用于初始化每个实例的state，此时可以访问this.props。
3.componentWillMount
在完成首次渲染之前调用，此时仍可以修改组件的state。
4.render
必选的方法，创建虚拟DOM，该方法具有特殊的规则：
只能通过this.props和this.state访问数据
可以返回null、false或任何React组件
只能出现一个顶级组件（不能返回数组）
不能改变组件的状态
不能修改DOM的输出
5.componentDidMount
真实的DOM被渲染出来后调用，在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。
在服务端中，该方法不会被调用。
6.componentWillReceiveProps
组件接收到新的props时调用，并将其作为参数nextProps使用，此时可以更改组件props及state。
componentWillReceiveProps: function(nextProps) {
if (nextProps.bool) {
this.setState({
bool: true
});
}
}
7.shouldComponentUpdate
组件是否应当渲染新的props或state，返回false表示跳过后续的生命周期方法，通常不需要使用以避免出现bug。在出现应用的瓶颈时，可通过该方法进行适当的优化。
在首次渲染期间或者调用了forceUpdate方法后，该方法不会被调用
8.componentWillUpdate
接收到新的props或者state后，进行渲染之前调用，此时不允许更新props或state。
9.componentDidUpdate
完成渲染新的props或者state后调用，此时可以访问到新的DOM元素。
10.componentWillUnmount
组件被移除之前被调用，可以用于做一些清理工作，在componentDidMount方法中添加的所有任务都需要在该方法中撤销，比如创建的定时器或添加的事件监听器。
image.png
生命周期简单模板
class name extend component{
static defluteProps={
name:'name',
},
constructor(props){
super(props);
this.state={.......}
},
componmentsWillmount(){
},
doSomething = () => {
require.ensure(['./app2',....], (require) => {
const Comp = require('./app2');
this.setState({
currentComponent: <Comp/>
})
})
};
render(){
render(){
<div>{this.state}</div>
}
}
}
组件之间传值
- 父组件 向 子组件 传递信息 >>>主要是通过 prop进行传值
<span style="font-size:18px;">//父组件
var MyContainer = React.createClass({
getInitialState: function () {
return {
checked: false
};
},
render: function() {
return (
<ToggleButton text="Toggle me" checked={this.state.checked} />
);
}
});
// 子组件
var ToggleButton = React.createClass({
render: function () {
// 从（父组件）获取的值
var checked = this.props.checked,
text = this.props.text;
return (
<label>{text}: <input type="checkbox" checked={checked} /></label>
);
}
});</span>
- 子组件 向 父组件 传递信息
<span style="font-size:18px;">// 父组件
var MyContainer = React.createClass({
getInitialState: function () {
return {
checked: false
};
},
onChildChanged: function (newState) {
this.setState({
checked: newState
});
},
render: function() {
var isChecked = this.state.checked ? 'yes' : 'no';
return (
<div>
<div>Are you checked: {isChecked}</div>
<ToggleButton text="Toggle me"
initialChecked={this.state.checked}
callbackParent={this.onChildChanged}
/>
</div>
);
}
});
// 子组件
var ToggleButton = React.createClass({
getInitialState: function () {
return {
checked: this.props.initialChecked
};
},
onTextChange: function () {
var newState = !this.state.checked;
this.setState({
checked: newState
});
//这里将子组件的信息传递给了父组件
this.props.callbackParent(newState);
},
render: function () {
// 从（父组件）获取的值
var text = this.props.text;
// 组件自身的状态数据
var checked = this.state.checked;
//onchange 事件用于单选框与复选框改变后触发的事件。
return (
<label>{text}: <input type="checkbox" checked={checked} onChange={this.onTextChange} /></label>
);
}
});</span>
以上例子中，在父组件绑定callbackParent={this.onChildChanged}，在子组件利用this.props.callbackParent(newState),触发了父级的的this.onChildChanged方法，进而将子组件的数据（newState）传递到了父组件。
这样做其实是依赖 props 来传递事件的引用，并通过回调的方式来实现的。
- 兄弟组件之间的传值
<span style="font-size:18px;">// 定义一个容器（将ProductSelection和Product组件放在一个容器中）
var ProductList = React.createClass({
render: function () {
return (
<div>
<ProductSelection />
<Product name="product 1" />
<Product name="product 2" />
<Product name="product 3" />
</div>
);
}
});
// 用于展示点击的产品信息容器
var ProductSelection = React.createClass({
getInitialState: function() {
return {
selection: 'none'
};
},
componentDidMount: function () {
//通过PubSub库订阅一个信息
this.pubsub_token = PubSub.subscribe('products', function (topic, product) {
this.setState({
selection: product
});
}.bind(this));
},
componentWillUnmount: function () {
//当组件将要卸载的时候，退订信息
PubSub.unsubscribe(this.pubsub_token);
},
render: function () {
return (
<p>You have selected the product : {this.state.selection}</p>
);
}
});
var Product = React.createClass({
onclick: function () {
//通过PubSub库发布信息
PubSub.publish('products', this.props.name);
},
render: function() {
return <div onClick={this.onclick}>{this.props.name}</div>;
}
});</span>
这个例子需要引入一个PubSubJS 库，通过这个库你可以订阅的信息，发布消息以及消息退订。
ProductSelection和Product本身是没有嵌套关系的，而是兄弟层级的关系。但通过在ProductSelection组件中订阅一个消息，在Product组件中又发布了这个消息，使得两个组件又产生了联系，进行传递的信息。所以根据我个人的理解，当两个组件没有嵌套关系的时候，也要通过全局的一些事件等，让他们联系到一起，进而达到传递信息的目的。
- 利用react-redux进行组件之间的状态信息共享
require.ensure()按需加载
require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])
dependencies: 依赖的模块数组
callback: 回调函数，该函数调用时会传一个require参数
chunkName: 模块名，用于构建时生成文件时命名使用
路由配置模板
const RouteConfig = (
<Router history={history}>
<Route path="/" component={Roots}>
<IndexRoute component={index} />//首页
<Route path="index" component={index} />
<Route path="helpCenter" getComponent={helpCenter} />//帮助中心
<Route path="saleRecord" getComponent={saleRecord} />//销售记录
<Redirect from='*' to='/' />
</Route>
</Router>
);
fetch 简单使用 第二个参数为可选
var myHeaders = new Headers();
var myInit = {
method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default'
};
fetch(url,myInit).then(function(response) {
return response.blob();
}).then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});