React快速上手5-react中的事件和生命周期函数

这节中我们将主要介绍react应用中的事件和生命周期函数

React事件

在react中，我们不用addEventListener来注册一个事件，我们将用一种更简单的方式来注册事件。
下面就是一个注册了点击事件的简单例子：

const ButtonClick = props => {
  return (
    <button onClick={props.clickHandle}>
      Click it!
    </button>
  )
}

可以看到，react事件的注册有点像普通的旧JavaScript事件处理程序一样，只是这次你用JavaScript定义所有内容，而不是HTML中，并且你传递的是函数，而不是字符串。
实际的事件名称也有点不同，因为在React中你需要使用camelCase进行所有操作，所以onclick变为onClick，onsubmit变为onSubmit。
作为参考，下面是旧的混合了js事件的HTML代码：

<button onclick="clickHandle()">click it.</button>

事件处理方法

将事件处理方法定义为Component类的方法是一种约定：

class Converter extends React.Component {
  clickHandle = event => {
    this.setState({ count: this.state.count+1})
  }
}

this的bind

在react组件中千万不要忘记绑定方法，默认情况下，ES6类的方法不受约束，这意味着除非您将方法定义为箭头函数，否则不会定义：

//箭头函数定义不需要bind this
class Converter extends React.Component {
  clickHandle = e => {
    /* ... */
  }
  //...
}

// 普通函数定义，需要在constructor中给相应的方法bind this
class Converter extends React.Component {
  constructor(props) {
    super(props)
    this.clickHandle = this.clickHandle.bind(this)
  }
  clickHandle(e) {}
}

事件概览

react中支持很多事件，下面是事件总览：

• Clipboard
  onCopy、onCut、onPaste
• Composition
  onCompositionEnd、onCompositionStart、onCompositionUpdate
• Keyboard
  onKeyDown、onKeyPress、onKeyUp
• Focus
  onFocus、onBlur
• Form
  onChange、onInput、onSubmit
• Mouse
  onClick、onContextMenu、onDoubleClick、onDrag、onDragEnd、onDragEnter、onDragExit、onDragLeave、onDragOver、onDragStart、onDrop、onMouseDown、onMouseEnter、onMouseLeave、onMouseMove、onMouseOut、onMouseOver、onMouseUp
• Selection
  onSelect
• Touch
  onTouchCancel、onTouchEnd、onTouchMove、onTouchStart
• UI
  onScroll
• Mouse Wheel
  onWheel
• Media
  onAbort、onCanPlay、onCanPlayThrough、onDurationChange、onEmptied、onEncrypted、onEnded、onError、onLoadedData、onLoadedMetadata、onLoadStart、onPause、onPlay、onPlaying、onProgress、onRateChange、onSeeked、onSeeking、onStalled、onSuspend、onTimeUpdate、onVolumeChange、onWaiting
• Image
  onLoad、onError
• Animation
  onAnimationStart、onAnimationEnd、onAnimationIteration
• Transition
  onTransitionEnd

react生命周期方法

通过class定义的react组件拥有一些和组件生命周期相关的钩子函数，当组件创建、更新、销毁时都会调用相关的钩子函数，我们可以在其中调用一些方法，来实现一些功能，而这也是接下来我们将看到的。
首先，一个组件的生命大致分为三个阶段：

1. mounting 挂载
2. updating 更新
3. unmounting 销毁
   这三个阶段又都会调用相关的一系列钩子函数

mounting

在这个阶段，组件将会挂载到DOM上，这个阶段会有4个生命周期函数：constructor, getDerivedStateFromProps, render and componentDidMount

1. constructor()
   constructor是组件mounting时第一个调用的方法，在这个方法中你可以设置state和bind this

constructor(props) {
  super(props);
  // Don't call this.setState() here!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

2. getDerivedStateFromProps()
   在这个方法里，如果state依赖于props时，getDerivedStateFromProps可用于根据props值来更新state。
   这个方法在react 16.3中添加，以用来替换已经被废弃掉的componentWillReceiveProps函数，同时它也是一个静态方法，因此不能再它里面去访问this。它的返回值是一个对象，如果没有需要更新的state，则返回null。示例：

static getDerivedStateFromProps(nextProps, prevState) {
    // Store prevId in state so we can compare when props change.
    if (nextProps.id !== prevState.prevId) {
      return {
        externalData: null,
        prevId: nextProps.id,
      };
    }
    // No state update necessary
    return null;
  }

3. render()
   我们在render方法里返回jsx写的界面，这是一个纯函数。
4. componentDidMount()
   在这个方法里，我们可以调用一些和DOM相关的处理操作。

Updating

当组件的state或props发生变化时会触发组件的更新，这一个阶段将会调用5个生命函数：getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate and componentDidUpdate.

1. getDerivedStateFromProps
   这个方法和在mounting阶段的getDerivedStateFromProps方法一样
2. shouldComponentUpdate()

shouldComponentUpdate(nextProps, nextState)

在这个钩子函数里可以访问更新之后的props和state已经当前的props和state，同时它的返回值是一个Boolean值true或false，如果为true，组件就会去更新，如果为false，组件会取消更新。因此，一般我们会在这个钩子函数里去做判断，减少一些代价不菲的不必要重新渲染，以提升组件性能。

3. render()
4. getSnapshotBeforeUpdate()
   在此方法中，您可以访问上一个渲染的props和state，以及当前渲染的state，应用场景很少。
5. componentDidUpdate()

componentDidUpdate(prevProps, prevState, snapshot)

这个方法对应于mounting阶段的componentDidMount()

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

unmounting

组件销毁阶段就一个钩子函数：componentWillUnmount()

1. componentWillUnmount()
   从DOM中删除组件时调用该方法，使用它来执行您需要执行的任何类型的清理，例如清理一些js原生事件，定时器等等。

注意事项

在React 16.3版本之后不推荐使用componentWillMount，componentWillReceiveProps或componentWillUpdate这些钩子函数，这些函数将来可能会被废弃掉。

持续更新中

上一篇：React快速上手4-component、state和props
下一篇：React快速上手6-Context、高阶组件和Hooks