类组件
该类继承React.Component,并且拥有一个render()函数,该函数的作用与函数组件的那个函数一样,用于返回一个JSX。
class Clock extends React.Component { // render函数表示渲染,每次重新渲染都要调用该函数 render(){ return ( <div> <h2>Clock, {this.props.name}</h2> </div> ); } }
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 <h1>{this.state.msg}</h1> }
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 <h1 onClick={this.handleClick}></h1> }
2.事件传参 handleClick = (a,b,event)=>{ a=2 b=3 } render(){ return <h1 onClick={this.handleClick.bind(this,2,3)}></h1> }
3.事件传参2 handleClick = (a,b,event)=>{ a=2 b=3 } render(){ return <h1 onClick={ (e)=>{this.handleClick(2,3,e)} }></h1> } //上述事件绑定可以如下解释 //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,它指向组件。