持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情。

今天主要学习的是react中页面的生命周期以及事件处理。

生命周期

constructor

构造方法创建组件时候被调用

 // 构造方法创建组件时候被调用
  constructor() {
  
  }

componentWillUnmount

页面将要加载，dom还没加载完成的时候调用， componentWillUnmount在版本16.0之后用UNSAFE_componentWillMount。

  // 页面将要加载，dom还没加载完成的时候，
  componentWillUnmount() {

  }

componentDidMount

页面加载完成的时候调用

  // 页面加载完成
  componentDidMount() {

  }

componentWillReceiveProps

在组件接收到一个新的prop（更新后）时被调用，这个方法在初始化render时不会被调用，16.0之后改用UNSAFE_componentWillReceiveProps。

  // UNSAFE_componentWillReceiveProps
  componentWillReceiveProps(newProps) {
    
  }

shouldComponentUpdate

shouldComponentUpdate方法返回一个布尔值，false为不更新组件，true为更新，在组件接收到新的props或者state时被调用，在初始化的时候不被调用，可以在你确认不需要更新组件的时候调用，用于优化。

  shouldComponentUpdate(newProps,newSate) {
    // 默认返回true
    if(this.state.name === newSate.name) {
      return false
    } else {
      return true
    }
  }

componentWillUpdate

在组件接收新的props或者state但还没有render的时候被调用，在初始化的时候不会被调用。16.0之后改用UNSAFE_componentWillUpdate。

  // UNSAFE_componentWillUpdate
  componentWillUpdate(nextProps,nextState) {

  }

componentDidUpdate

在组件完成更新后立即调用，在初始化的时候不会被调用。

  // 在组件完成更新后立即调用，在初始化的时候不会被调用
  componentDidUpdate(prevProps,prevState) {
    
  }

render

页面渲染的时候调用，是react的核心函数。

render() {

}

componentWillUnmount

在组件从DOM中移除的时候立刻被调用，就是说当离开页面的时候调用

  componentWillUnmount() {
    
  }

事件处理

JSX和普通HTML的区别

在学习react中事件处理之前，先了解一下JSX和普通HTML的区别：

1. React事件是使用驼峰命名，而不是全部小写；
2. 通过JSX，传递一个函数作为事件处理程序，而不是一个字符串；

示例：

// html
<button onclick="getList()"></button>

// react
<button onClick={this.getList.bind(this)}></button>

事件处理的写法

在React中点击事件有两种写法：

第一种：

clickBtn(val) {
}
render() {
 return {
 <div>
    <button onClick={this.clickBtn.bind(this)}></button>
 </div>
 }
}

第二种

// 箭头函数
clickBtn=()=> {

}
render() {
 return {
 <div>
    <button onClick={this.clickBtn}></button>
 </div>
 }
}

事件传参的写法

事件中如何传递参数的：

第一种：

clickBtn(val) {
  consoloe.log(val) // 参数
}
render() {
 return {
 <div>
    <button onClick={this.clickBtn.bind(this, '参数')}></button>
 </div>
 }
}

第二种：

clickBtn(val) {
  consoloe.log(val) // 参数
}
render() {
 return {
 <div>
    <button onClick={()=>{this.clickBtn('参数')}}></button>
 </div>
 }
}

鼠标相关事件

• 鼠标移动元素上：onMouseOver
• 鼠标离开元素：onMouseOut
• 鼠标移动：onMouseMove
• 触摸开始：onTouchStart
• 触摸移动：onTouchMove
• 触摸结束：onTouchEnd 使用方法比较简单，具体使用就不一一举例了。

接下来继续学习react的知识点~