3-类组件

类组件

该类继承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()方法进行修改

2State的更新是异步的

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

组件的生命周期

componentWillMount    

在组件将要被挂载前调用

componentDidMount    

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

componentWillUnmount    

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

事件绑定

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

this指针

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

猜你喜欢

转载自www.cnblogs.com/wskb/p/11021498.html
今日推荐