React-生命周期

今天要分享的是react组件中很重要的生命周期，react组件分为两种，一种是函数组件，如下：

import React from 'react'
export default function App() {
  return (
    <div>
      这是一个函数组件
    </div>
  )
}
<!--或者-->
function HelloComponent(props) {
  return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode) 

函数组件也称为 无状态组件，也就是用来纯展示的，没有state状态操作的组件，函数组件有几个特点：

• 组件不会被实例化，整体渲染性能得到提升
• 组件不能访问this对象
• 组件无法访问生命周期的方法
• 无状态组件只能访问输入的props

所以无状态组件是不需要组件生命周期管理和状态管理的，所以，生命周期只有在另一种组件类型类组件中存在

类组件 我比较常用的React.Component创建的组件如下：

import React, { Component } from 'react'
export default class App extends Component {
  render() {
    return (
      <div>
        这是一个类组件
      </div>
    )
  }
}

• 只要有可能，尽量使用无状态组件创建形式
• 否则（如需要state、生命周期方法等），使用React.Component这种es6形式创建组件

接下来我们进入正题，（React v16.0前）组件的生命周期分为三个阶段：

• 组件的挂载阶段(Mounting)

  

  

• 组件的更新阶段(update)

  

  

  

  

• 组件的卸载阶段

  

React v16.4 新增两个生命周期：

getDerivedStateFromProps，getSnapshotBeforeUpdate

这两个生命周期还在持续学习中，项目中目前没用到，下次带给大家分享，希望分享能帮助大家，与君共勉，谢谢！