<react学习笔记(4)>组件的生命周期(运行阶段和销毁阶段)以及事件处理函数-CSDN博客

1.组件的生命周期

接着(2)中的组件生命周期

1.运行阶段

运行阶段有5个步骤：

componentWillReceiveProps: 父组件修改属性触发，可以修改新属性，修改状态。
shouldComponentUpdate: 组件是否更新，返回布尔值，默认值为true，表示更新；返回false会阻止render调用，render后面的函数都不会执行。
componentWillUpdate: 不能修改属性与状态，用于日志打印与数据获取。
render：只能访问this.props与this.state，只有一个顶层标签，不允许修改状态和DOM输出。
componentDidUpdate：可以修改DOM。

componentWillReceiveProps有一个参数：newProps
其余四个有两个参数：newProps,newState

//demo1
<div id="demo1"></div>
<script type="text/babel">
    var HelloReact = React.createClass({
            // 组件将要接收新的属性
            componentWillReceiveProps:function(newProps){
                console.log('componnetWillReceiveProps',1);
                console.log(newProps);
            },
            // 是否允许组件更新，返回true或者false，一般不会改变它的默认值：true
            shouldComponentUpdate:function(newProps,newState){
                console.log('shouldComponentUpdate',2);
                console.log(newProps,newState);
                return true;
            },
            // 组件将要更新
            componentWillUpdate:function(){
                console.log('componentWillUpdate',3);
            },
            render:function(){
                console.log('render',4);
                return <p>Hello {this.props.name?this.props.name:'React'}</p>;
            },
            // 组件更新完毕
            componentDidUpdate:function(){
                console.log('componentDidUpdate',5);
            }
        })
        var Demo = React.createClass({
            getInitialState:function(){
                return {
                    name:''
                };
            },
            handleChange:function(e){
                this.setState({
                    name:e.target.value
                });
            },
            render:function(){ 
                return(
                    <div>
                        <HelloReact name={this.state.name}/>
                        {/*传的是状态，到子组件变成了属性*/}
                        <input type="text" onChange={this.handleChange} />
                    </div>
                )
            }
        })
        ReactDOM.render(<Demo/>,document.getElementById("demo1"));
</script>
复制代码

效果图：初始:

输入内容时：

在第二步shouldComponentUpdate中如果返回 false，会阻止后面的代码

shouldComponentUpdate(newProps,newState){
    return false;
复制代码

结果：

2.销毁阶段

componentWillUnmount: 组件将要卸载
销毁阶段有两种方式
1. 利用input的输入内容来卸载组件，ReactDOM中提供一个方法unmountComponentAtNode()，参数是节点对象。
2. 通过判断state的状态来卸载组件

在原来的例子中扩展

//demo1
<div id="demo2"></div>
<script type="text/babel">
    var HelloReact = React.createClass({
            componentWillReceiveProps:function(newProps){
                console.log('componnetWillReceiveProps',1);
            },
            shouldComponentUpdate:function(newProps,newState){
                console.log('shouldComponentUpdate',2);
                return true;
            },
            componentWillUpdate:function(){
                console.log('componentWillUpdate',3);
            },
            render:function(){
                console.log('render',4);
                return <p>Hello {this.props.name?this.props.name:'React'}</p>;
            },
            componentDidUpdate:function(){
                console.log('componentDidUpdate',5);
            },
            
            //销毁阶段
            componentWillUnmount:function(){
                console.log('BOOOOOOOOOOOOOOOOOM');
            }
        })
        var Demo = React.createClass({
            getInitialState:function(){
                return {
                    name:''
                };
            },
            handleChange:function(e){
            //方法1：
                if(e.target.value =="1234"){
                    ReactDOM.unmountComponentAtNode(document.getElementById("demo2"));
                    return;
                };
                this.setState({
                    name:e.target.value
                });
            },
            render:function(){ 
            //方法2：
                if(this.state.name="1234"){
                    return <div>1234</div>
                };
                return(
                    <div>
                        <HelloReact name={this.state.name}/>
                        <input type="text" onChange={this.handleChange} />
                    </div>
                )
            }
        })
        ReactDOM.render(<Demo />, document.getElementById("demo2"));
</script>
复制代码

使用方法一，输入"1234"的效果图：

使用方法二，当输入"1234"时的效果图：

2.事件处理

1.编写事件处理函数

自定义组件：驼峰命名
在函数体中进行一些操作，常见的有：更新页面内容，更新组件状态，与后台交互。

书写方式：

var Demo = React.createClass({
	getInitialState:function(){		},
	handleClick: function(event){		},
	handleChange: function(){		},
	render:function(){		},
})
复制代码

2.绑定事件处理函数

onClick={this,handleClick}

需要注意的是：不要在事件后面添加上一个() 其他的事件：触摸事件：onTouchCancel，onTouchEnd，onTouchMove，onTouchStart

键盘事件：onKeyDown，onKeyUp， onKeyPress（前两者的组合）

表单时间：onChange，onInput，onSubmit

焦点事件：onFocus，onBlur

UI元素事件：onScroll

滚动事件：onWhell（鼠标滚动）

鼠标事件：onClick，onContextMenu，onDoubleClick…...

3.事件对象

1.通用：所有的事件都有的事件属性，例如：

a：target 获取节点  
b: timeStame 获取时间戳  
c: type 获取事件类型  
d：nativeEvent 浏览器的默认事件 
e: preventDefault 阻止默认行为  
f: stopPropagation 组织冒泡
g: bubbles 事件是否可以冒泡
h: cancelable 事件可否可以取消
......
复制代码

<div id="demo3"></div>
    <script type="text/babel">
        var Demo = React.createClass({
            handleClick:function(e){
                console.log(e);
                console.log(e.target);
                console.log(e.nativeEvent);
                console.log(e.cancelable);
                console.log(e.type);
                console.log(e.bubbles);
                console.log(e.stopPropagation);
            },
            render:function(){
                return <div onClick={this.handleClick}>Hello World</div>;
            }
        })
        ReactDOM.render(<Demo/>,document.getElementById('demo3'))
    </script>
复制代码

点击后的效果图：

事件与状态关联：

inputChange(event){
		this.setState({
			inputText:event.target.value
		});
	}

复制代码

事件处理函数例子

<div id="demo4"></div>
    <script type="text/babel">
        var Demo = React.createClass({
            getInitialState(){
                return {
                    width: 200,
                    height: 200,
                    backgroundColor: '#ff6666'
                };
            },
            randomColor(){
                var r = Math.floor(Math.random()*256);
                var g = Math.floor(Math.random()*256);
                var b = Math.floor(Math.random()*256);
                return 'rgb('+r+','+g+','+b+')';
            },
            handleWheel(){
                this.setState({
                    backgroundColor:this.randomColor()
                });
            },
            render(){
                return <div onWheel={this.handleWheel} style={this.state}>这是一个案例，鼠标滚动实现背景颜色的变化</div>;
            }
        });
        ReactDOM.render(<Demo/>,document.getElementById('demo4'))
    </script>
复制代码