React.js 小书 Lesson18 - 挂载阶段的组件生命周期（一）

pf_miles 发布于2019-08-21 17:34 / 3412人阅读

摘要：我们把将组件渲染，并且构造元素然后塞入页面的过程称为组件的挂载这个定义请好好记住。挂载的时候，会在组件的之前调用，在元素塞入页面以后调用。下一节中我们将介绍小书挂载阶段的组件生命周期二。

React.js 小书 Lesson18 - 挂载阶段的组件生命周期（一）

本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson18

转载请注明出处，保留原文链接以及作者信息

在线阅读：http://huziketang.com/books/react

我们在讲解 JSX 的章节中提到，下面的代码：

ReactDOM.render(
 , 
  document.getElementById("root")
)

会编译成：

ReactDOM.render(
  React.createElement(Header, null), 
  document.getElementById("root")
)

其实我们把 Header 组件传给了 React.createElement 函数，又把函数返回结果传给了 ReactDOM.render。我们可以简单猜想一下它们会干什么事情：

// React.createElement 中实例化一个 Header
const header = new Header(props, children)
// React.createElement 中调用 header.render 方法渲染组件的内容
const headerJsxObject = header.render()

// ReactDOM 用渲染后的 JavaScript 对象来来构建真正的 DOM 元素
const headerDOM = createDOMFromObject(headerJsxObject)
// ReactDOM 把 DOM 元素塞到页面上
document.getElementById("root").appendChild(headerDOM)

上面过程其实很简单，看代码就能理解。

我们把 React.js 将组件渲染，并且构造 DOM 元素然后塞入页面的过程称为组件的挂载（这个定义请好好记住）。其实 React.js 内部对待每个组件都有这么一个过程，也就是初始化组件 -> 挂载到页面上的过程。所以你可以理解一个组件的方法调用是这么一个过程：

-> constructor()
-> render()
// 然后构造 DOM 元素插入页面

这当然是很好理解的。React.js 为了让我们能够更好的掌控组件的挂载过程，往上面插入了两个方法：

-> constructor()
-> componentWillMount()
-> render()
// 然后构造 DOM 元素插入页面
-> componentDidMount()

componentWillMount 和 componentDidMount 都是可以像 render 方法一样自定义在组件的内部。挂载的时候，React.js 会在组件的 render 之前调用 componentWillMount，在 DOM 元素塞入页面以后调用 componentDidMount。

我们给 Header 组件加上这两个方法，并且打一些 Log：

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 (
      
        React 小书
      
    )
  }
}

在控制台你可以看到依次输出：

可以看到，React.js 确实按照我们上面所说的那样调用了定义的两个方法 componentWillMount 和 componentDidMount。

机灵的同学可以想到，一个组件可以插入页面，当然也可以从页面中删除。

-> constructor()
-> componentWillMount()
-> render()
// 然后构造 DOM 元素插入页面
-> componentDidMount()
// ...
// 从页面中删除

React.js 也控制了这个组件的删除过程。在组件删除之前 React.js 会调用组件定义的 componentWillUnmount：

-> constructor()
-> componentWillMount()
-> render()
// 然后构造 DOM 元素插入页面
-> componentDidMount()
// ...
// 即将从页面中删除
-> componentWillUnmount()
// 从页面中删除

看看什么情况下会把组件从页面中删除，继续使用上面例子的代码，我们再定义一个 Index 组件：

class Index extends Component {
  constructor() {
    super()
    this.state = {
      isShowHeader: true
    }
  }

  handleShowOrHide () {
    this.setState({
      isShowHeader: !this.state.isShowHeader
    })
  }

  render () {
    return (
      
        {this.state.isShowHeader ?  : null}
        
      
    )
  }
}

ReactDOM.render(
  ,
  document.getElementById("root")
)

Index 组件使用了 Header 组件，并且有一个按钮，可以控制 Header 的显示或者隐藏。下面这行代码：

...
{this.state.isShowHeader ?  : null}
...

相当于 state.isShowHeader 为 true 的时候把 Header 插入页面，false 的时候把 Header 从页面上删除。这时候我们给 Header 添加 componentWillUnmount 方法：

...
  componentWillUnmount() {
    console.log("component will unmount")
  }
...

这时候点击页面上的按钮，你会看到页面的标题隐藏了，并且控制台打印出来下图的最后一行，说明 componentWillUnmount 确实被 React.js 所调用了：

你可以多次点击按钮，随着按钮的显示和隐藏，上面的内容会按顺序重复地打印出来，可以体会一下这几个方法的调用过程和顺序。

总结

React.js 将组件渲染，并且构造 DOM 元素然后塞入页面的过程称为组件的挂载。这一节我们学习了 React.js 控制组件在页面上挂载和删除过程里面几个方法：

componentWillMount：组件挂载开始之前，也就是在组件调用 render 方法之前调用。

componentDidMount：组件挂载完成以后，也就是 DOM 元素已经插入页面后调用。

componentWillUnmount：组件对应的 DOM 元素从页面中删除之前调用。

但这一节并没有讲这几个方法到底在实际项目当中有什么作用，下一节我们通过例子来讲解一下这几个方法的用途。

下一节中我们将介绍《React.js 小书 Lesson19 - 挂载阶段的组件生命周期（二）》。

云服务器 GPU云服务器线程的生命周期 bug的生命周期 activity的生命周期 ios应用的生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89685.html

写一本关于 React.js 的小书

摘要：因为工作中一直在使用，也一直以来想总结一下自己关于的一些知识经验。于是把一些想法慢慢整理书写下来，做成一本开源免费专业简单的入门级别的小书，提供给社区。本书的后续可能会做成视频版本，敬请期待。本作品采用署名禁止演绎国际许可协议进行许可 React.js 小书本文作者：胡子大哈本文原文：React.js 小书转载请注明出处，保留原文链接以及作者信息在线阅读：http://huzi...

Scorpion 2019-08-21 11:39 评论0 收藏0
React.js 小书 Lesson20 - 更新阶段的组件生命周期

摘要：所以对于组件更新阶段的组件生命周期，我们简单提及并且提供一些资料给大家。这里为了知识的完整，补充关于更新阶段的组件生命周期你可以通过这个方法控制组件是否重新渲染。大家对这更新阶段的生命周期比较感兴趣的话可以查看官网文档。 React.js 小书 Lesson20 - 更新阶段的组件生命周期本文作者：胡子大哈本文原文：http://huziketang.com/books/react...

Yumenokanata 2019-08-21 17:34 评论0 收藏0
React.js 小书 Lesson19 - 挂载阶段的组件生命周期（二）

摘要：多次的隐藏和显示会让重新构造和销毁组件，每次构造都会重新构建一个定时器。而销毁组件的时候没有清除定时器，所以你看到报错会越来越多。例如清除该组件的定时器和其他的数据清理工作。下一节中我们将介绍小书更新阶段的组件生命周期。 React.js 小书 Lesson19 - 挂载阶段的组件生命周期（二）本文作者：胡子大哈本文原文：http://huziketang.com/books/re...

Dogee 2019-08-21 17:34 评论0 收藏0
React.js 小书 Lesson25 - 实战分析：评论功能（四）

摘要：接下来是实战环节，我们会继续上一阶段的例子，把评论功能做得更加复杂一点。把已经发布的评论持久化，存放到浏览器的中。评论显示发布日期，如秒前，分钟前，并且会每隔秒更新发布日期。事件监听方法，。下一节中我们将介绍小书实战分析评论功能五。 React.js 小书 Lesson25 - 实战分析：评论功能（四）本文作者：胡子大哈本文原文：http://huziketang.com/book...

mozillazg 2019-08-21 17:33 评论0 收藏0
React.js 小书 Lesson17 - 前端应用状态管理 —— 状态提升

摘要：在实际项目当中状态提升并不是一个好的解决方案，所以我们后续会引入这样的状态管理工具来帮助我们来管理这种共享状态，但是在讲解到之前，我们暂时采取状态提升的方式来进行管理。 React.js 小书 Lesson17 - 前端应用状态管理 —— 状态提升本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson17 转载请注明出处，保留原...

newtrek 2019-08-21 17:34 评论0 收藏0