共计 3941 个字符，预计需要花费 10 分钟才能阅读完成。
这里首先推荐一下Materliu的React入门，讲的浅显易懂，非常好，这是我很喜欢的一个老师。
React的组件
React的组件本质上是状态机，输入确定，输出一定确定，状态发生转换时会触发不同的hook函数，从而让开发者有机会做出响应。
React的生命周期，主要经历4个阶段：创建阶段，实例化阶段，更新阶段和销毁阶段。
1.创建阶段，该阶段主要发生在创建组件类的时候，即在调用React.createClass的时候。这个时候会触发一个hook函数，getDefaultProps的方法。这个方法一般用于初始化静态数据，而且在组件生命周期中只会调用一次。对于那些没有被父辈组件指定props属性的新建实例来说，这个方法返回的对象可以用为实例设置默认的props值。
2.实例化阶段，该阶段一般发生在创建的组件类被调用的时候。一般这个阶段有4个hook函数
Mounted：是指ReactCompoents被render解析生成对应的DOM并被插入浏览器的DOM结构的一个过程
- getInitialState,初始化组件的state值，返回值会赋值给组件的this.state属性，对于组件的每个实例来说，这个方法调用的次数有且只有一次。每次实例创建都会调用该方法。
- componentWillMount(event)，该方法在首次渲染之前被调用，即组件将要Mounted,根据业务逻辑处理state，这个Hook函数在类将要实例化的时候调用一次。
- render,根据state的值与虚拟DOM结构生成对应的HTML。
- componentDidMount(event)，这个Hook函数在类实例化完成的时候调用一次，这时已经生成了真实的DOM，这里可以对DOM进行处理，可以通过ReactDOM.findDOMNode(this)获取DOM
3.更新阶段,该阶段主要发生在用户操作之后，或者父组件更新的时候。该阶段有5个hook函数
Updating：指一个mounted的ReactComponents被重新render的过程（只有当state或者props发生变化的时候）
- componentWillReceiveProps(NewProps),只有当组件接受到父组件传递新的Props时，会触发该函数，该函数中拿到新的Props在通过this.setState方法设置新的state
- shouldComponentUpdate(nextProps,nextState)，该方法用来拦截新的props或state,然后根据事先设定好的判断逻辑，决定要不要更新组件，返回true或false
- componentWillUpdate(object nextProps,object nextState),当第二步返回true的时候调用
- render,根据state的值与虚拟DOM结构生成对应的HTML
- componentDidUptate,该方法在组件更新完成后触发，可以做一些DOM操作
4.销毁阶段Unmount，当取消时间绑定，或者移除虚拟DOM对应的组件数据，一些无效的定时器的时候调用。这个阶段有一个hook函数componentWillUnmount；
此外React.unmountComponentAtNode方法传入装载组件类的DOM， 从 DOM 中移除已经挂载的 React 组件，清除相应的事件处理器和 state。如果在 container 内没有组件挂载，这个函数将什么都不做。如果组件成功移除，则返回 true；如果没有组件被移除，则返回 false。
下面举个栗子
<script type="text/babel">
console.log(React.PropTypes)
var GenderSelect = React.createClass({
render: function() {
return (<select onChange={this.props.handleSelect} value={this.props.gender}>
<option value="">选择</option>
<option value="0">男</option>
<option value="1">女</option>
</select>);
}
});
var SingupFrom = React.createClass({
//1.创建阶段
getDefaultProps:function(){
//这里是在创建类的时候被调用，这个时候并没有实例化类
console.log("getInitialProps,1-1");
console.log("-----------------");
return {};
},
//2.实例化阶段
getInitialState:function(){
//这里设置state的初始值
console.log("getInitialState,2-1");
return {
name:'Tattoo',
password:'123',
gender:'0'
}
},
handleSelect:function(event){
console.log(event);
//自定义函数
this.setState({
gender:event.target.value
})
},
handleChange:function(name,event){
console.log(event);
//自定义函数
var newState = {};
newState[name] = event.target.value;
this.setState(newState);
},
componentWillMount:function(){
//在render之前调用此方法
//业务逻辑的处理都放在这里，如对state的操作等
console.log('componentWillMount,2-2')
},
render:function(){
console.log('render');
console.log(this.state);
var props = {
handleSelect:this.handleSelect,
gender:this.state.gender
}
return (<form>
<label htmlFor="username">用户名:<input type="text" id="username" placeholder="请输入用户名字" value={this.state.name} onChange={this.handleChange.bind(this,'name')}/></label>
<br/>
<label htmlFor="password">密 码:<input type="password" id="password" placeholder="请输入用户名密码" value={this.state.password} onChange={this.handleChange.bind(this,'password')} /></label>
<br/>
{
/*<GenderSelect handleSelect={this.handleSelect} gender={this.state.gender}/>*/
}
<GenderSelect {...props}/>
</form>);
},
componentDidMount:function(){
//这个方法发生在render之后，在这个方法中可以使用render返回的虚拟DOM对象创建真实的DOM结构
//即是这里可以操作真实的DOM
let EventDom = ReactDOM.findDOMNode(this);
console.log(EventDom);
console.log('componentDidMount,2-4');
console.log('------------------');
},
//3.更新阶段
componentWillReceiveProps:function(NewProps){
//这个方法发生在this.props被修改或者父组件调用this.setProps()方法之后
//这里可以对新旧的state进行对比
//只有当组件接受到新的Props时，会触发该函数
console.log(NewProps);
console.log("componentWillRecieveProps,3-1");
},
shouldComponentUpdate:function(){
//是否真的要更新？
console.log('shouldComponentUpdate,3-2');
return true;
},
componentWillUpdate:function(){
//将要更新
//这里不能修改属性与状态
console.log('componentWillUpdate,3-3');
},
componentDidUpdate:function(){
//更新完毕
console.log('componentDidUpdate,3-5');
console.log('--------------------');
},
//4.销毁阶段
componentWillUnmount:function(){
//销毁时被调用
console.log('componentWillUnmount,4-1')
}
})
ReactDOM.render(<SingupFrom />,document.getElementById('example'));
</script>通常组件自身的Props是不可变的，state是私有的，可变的。
CK Mark