类组件

该类继承React.Component，并且拥有一个render()函数，该函数的作用与函数组件的那个函数一样，用于返回一个JSX。

 

class Clock extends React.Component {  // render函数表示渲染，每次重新渲染都要调用该函数  render(){    return (      
     
        
      
Clock, {this.props.name}
      
     
    );  }}

 

 

state

是组件内部维护的一组用于反映组件UI变化的状态集合。state需要在构造函数中进行初始化，如果要在组件类中重写构造函数，那么需要在构造函数的第一行显式调用super(props)

class Clock extends React.Component {    constructor(props){    //props形参在构造器中，和函数组件不一样    super(props);        this.state = {            now:new Date().toLocaleString()       }  }}

 

1.初始化        constructor(props){            super(props);            this.state = {                msg:'hello'            };        }

2.使用state中的数据        render(){            return 
{this.state.msg}
        }

3.修改state中的数据-状态        this.setState({msg:'world'})

 

 

 

state特点

1，不能直接修改state

需要调用this.setState()方法进行修改

2，State的更新是异步的

调用setState，组件的state并不会立即改变

 

组件的生命周期

componentWillMount    

在组件将要被挂载前调用

componentDidMount    

在组件被挂载之后立即调用，可以进行初始化网络请求，如果调用setState，然后可以再次渲染，但是这次渲染会发生在浏览器更新屏幕之前，用户不会发现中间状态。    

componentWillUnmount    

在组件将要被卸载的时候调用

 

 

 

 

事件绑定

需要在组件上通过'onXxx'来绑定事件，事件处理函数必须在大括号内通过this来指定。事件处理函数应该定义在类中，与render()函数在同一级别

1.在模板中绑定事件        handleClick = (event)=>{        }        render(){            return 
        }

2.事件传参        handleClick = (a,b,event)=>{            a=2            b=3        }        render(){            return 
        }

3.事件传参2        handleClick = (a,b,event)=>{            a=2            b=3        }        render(){            return 
{this.handleClick(2,3,e)}  }>
        }           //上述事件绑定可以如下解释        //onClick = test                    //把函数给onclick        //function test(e){                 // 箭头函数         //    this.handleClick(2,3,e)        //}

 bind,call,apply的区别：

function test(num){        console.log(1111);    }    test.call(this,1);          //修改指针指向，同时执行函数test，传参数1    test.apply(this,[1]);　　//修改指针指向，同时执行函数test，传参数1    test.bind(this)(2);　　//修改指针指向，同时执行函数test，传参数2    test.bind(this,2)();　　//修改指针指向，同时执行函数test，传参数2　 test.bind(this,2)      //修改指针指向，不执行函数test，传参数2

 

事件对象event            target            stopPropagation() 阻止冒泡            preventDefault()  阻止默认            ...

 

 

 

this指针

如果通过es6的函数声明方式来定义事件处理函数，那么在事件处理函数中的this为undefined。我们可以事件箭头函数来定义事件处理函数，这时候箭头函数中的this指向组件对象。最好用箭头函数来用this，它指向组件。