React(2)-组件的生命周期

192193次阅读
没有评论

共计 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是私有的,可变的。

正文完
 0
Chou Neil
版权声明:本站原创文章,由 Chou Neil 于2016-08-14发表,共计3941字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。