[JavaScript知识库]关于react的生命周期

创建组件

在我们定义好一个组件后传给react.createElement函数中，

又把函数的返回值给reactDOM.render

// React.createElement 中实例化一个 Header
const header = new Header(props, children)
// React.createElement 中调用 header.render 转换为jsx代码
const headerJsxObject = header.render()
// ReactDOM 用渲染后的 JavaScript 对象来来构建真正的 DOM 元素
const headerDOM = createDOMFromObject(headerJsxObject)
// ReactDOM 把 DOM 元素塞到页面上
document.getElementById('root').appendChild(headerDOM)

在我们将react.js组件渲染的时候，并且构造函数dom元素然后塞入页面的过程称为组件的挂在，在挂载的过程中，就有一个过程-初始化组件->挂载到页面上的过程，在这段时间会有两个生命周期分别为componentWillMount 和 componentDidMount

class Header extends Component {
  constructor () {
    super()
    console.log('construct')
  }
  componentWillMount () {
    console.log('component will mount')
  }
  componentDidMount () {
    console.log('component did mount')
  }
  render () {
    console.log('render')
    return (
      <div>
        <h1 className='title'>React 小书</h1>
      </div>
    )
  }
}

在我们引用这两个生命周期时可以看到

删除组件

componentWillUnmount组件对应的 DOM 元素从页面中删除之前调用。 但这一节并没有讲这几个方法到底在实际项目当中有什么作用，