React--Component Specs and Lifecycle(2015/11/13更新)
生命周期
在组件实例的整个周期中，React将在特定的时间点调用以下方法：
componentWillMount()- 组件实例即将挂接（初次渲染）时被调用这个方法在整个生命周期中只会被调用一次。
componentDidMount()- 组件实例挂接（初次渲染）后被调用这个方法在整个生命周期中只会被调用一次。
componentWillReceiveProps(nextProps)- 组件实例即将设置新属性时被调用参数nextProps表示即将应用到组件实例上的新属性值。这个方法在初次渲染时不会被调用。在此方法内调用setState()不会引起重新渲染。
shouldComponentUpdate(nextProps, nextState)- 组件实例即将重新渲染时被调用参数nextProps传入即将应用到组件实例上的新属性值，参数nextState传入组件实例即将被 设置的状态值。如果这个方法返回false，那么组件实例就不会被重新渲染。除非我们明确地知道，新的属性和状态不需要进行重新渲染，否则这个方法都应该返回true。这个方法在初次渲染时或通过forceUpdate()方法进行渲染时不会被调用。
componentWillUpdate(nextProps, nextState) - 组件实例即将重新渲染时被调用这个方法在初次渲染时不会被调用。注意：不能在此方法内调用setState()。
componentDidUpdate(prevProps, prevState)- 组件实例重新渲染后被调用这个方法在初次渲染时不会被调用。
componentWillUnmount()- 组件实例即将从DOM树移除时被调用这个方法在整个生命周期中只会被调用一次。
//Component Specifications
//1.render
//The render() method is required.
//2.getInitialState
//we define the origin state in this api
//3.getDefaultProps
// we define some default props in there
//4.propTypes
//he propTypes object allows you to validate props being passed to your components.
//5.mixins
//in my opinion, mixins like plugin,but we clould not use in es6 maybe.
//6.statics
//如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，
//而是直接通过类来调用，这就称为“静态方法”。
// var MyComponent = React.createClass({
// statics: {
// customMethod: function(foo) {
// return foo === 'bar';
// }
// },
// render: function() {
// }
// });
// MyComponent.customMethod('bar'); // true
//7.displayName
//if you use jsx ,need not use it
//Lifecycle Methods
var Hello = React.createClass({
getInitialState: function () {
console.log("getInitialState");
return {
count: 0,
};
},
getDefaultProps: function () {
console.log("getDefaultProps");
return {
title: "this is a default props",
};
},
componentWillMount: function () {
console.log("componentWillMount");
//Invoked once
//if you call setState within this method,render() will update state but only once
},
componentDidMount: function () {
console.log("componentDidMount");
//Invoked once
//immediately after the initial rendering occurs.
//you can integrate with other js library,like ajax,jQuery and so on
},
componentWillUnmount: function () {
//Invoked immediately before a component is unmounted from the DOM.
//Perform any necessary cleanup in this method
},
shouldComponentUpdate: function(){
console.log(shouldComponentUpdate);
//This method is not called for the initial render or when forceUpdate is used.
//Invoked before rendering when new props or state are being received.
//return true to call render() and false to not
//in parent component is use to state,according to state you can choose true or not
//but in sub component you can use both props and state
},
clickH: function(){
this.setState({
count: this.state.count + 1,
});
},
render:function(){
return(
<div>
<h1 onClick={this.clickH}>{this.props.title}</h1>
<Sub subtitle={this.state.count}/>
</div>
);
}
});
var Sub = React.createClass({
componentWillReceiveProps: function(nextProps){
console.log("componentWillReceiveProps");
//This method is not called for the initial render.
//Invoked when a component is receiving new props
//it always use in sub component, which recive props form parent component
//but in parent component it is a state,that guarantee props change
},
componentWillUpdate: function(){
//This method is not called for the initial render.
//Invoked immediately before rendering when new props or state are being received.
//You cannot use this.setState() in this method.
//in some times, can use componentWillReceiveProps instead.
},
componentDidUpdate: function(){
//This method is not called for the initial render.
//Invoked immediately after the component's updates are flushed to the DOM.
//Use this as an opportunity to operate on the DOM when the component has been updated.
},
render: function(){
return(
<h3>{this.props.subtitle}</h3>
);
}
});
React.render(
<Hello/>,
document.getElementById("test1")
);