目的：
- 学习 react 生命周期
针对对象：
- react 初学者
关键词:
- mount : 挂载
- render: 渲染
react 生命周期
1、理解 react 组件渲染过程
- 来看一段代码
import Home form './home';
ReactDOM.render(
<Home />,
document.getElementById('root');
)
分析： 其实我们把
Home组件传给了React.createElement函数，又把函数返回结果传给了ReactDOM.render。下面可以简单的假设一下函数都干了什么吗👇
// 实例化一个组件
const home = new Home(props,childern);
// 调用 render 方法
const homeJsxObject = home.render();
// ReactDOM 用渲染后的 JavaScript 对象来构建真正的 DOM 元素
createDOMFromObject(homeJsxObject)
// ReactDOM 把 DOM 元素塞到页面上面
document.getElementById('root').appendChild(headerDOM)
2、组件的挂载
-
根据上面的例子，引出一个非常重要的概念。
-
我们把 react.js 组件的渲染，并且构造 DOM 元素然后塞入页面的过程称为
组件的挂载 -
2.1 你可以这么去理解组件的初始化的过程
// 初始化组件
constructor();
// 挂载和渲染
render();
// 构造 DOM 结构插入页面
document.createElement()
document.getElementById('root').appendChild()
- 2.2 当然由于真正的组件构成初始化，挂载到页面的过程比较复杂，所以 react 添加了几个方法，让我们更好的使用这个过程。
-> constructor()
-> componentWillMount()
-> render()
// 然后构造 DOM 元素插入页面
-> componentDidMount()
componentWillMount 和 componentDidMount 都是可以像 render 方法一样自定义在组件的内部。挂载的时候，React.js 会在组件的 render 之前调用 componentWillMount，在 DOM 元素塞入页面以后调用 componentDidMount。
我们给组件加上这两个方法
class Hoem 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'>Hello React</h1>
</div>
)
}
}
- 然后在控制台看看
construct
component will mount
render
component did mount
- 当然我们可以将组件插入页面，当然也可以删除，很多情况下，会在组件销毁的时候进行一定的操作，所以这个 react 也帮我们定义了函数实现。
-> constructor()
-> componentWillMount()
-> render()
// 然后构造 DOM 元素插入页面
-> componentDidMount()
// ...
// 即将从页面中删除
-> componentWillUnmount()
// 从页面中删除
-
上面的
componentWillUnmount()就是在组件删除前会调用的函数 -
下面有个 demo 可以看看组件在删除的效果。
- 点击上面的👆，打开在线编辑工具的 console 看一下出现了什么，然后再点一下组件中的出现和隐藏按钮。看看 console 的变化情况。
总结
-
React.js 将组件渲染，并且构造 DOM 元素然后塞入页面的过程称为组件的挂载。我们学习了 React.js 控制组件在页面上挂载和删除过程里面几个方法：
- componentWillMount：组件挂载开始之前，也就是在组件调用 render 方法之前调用。
- componentDidMount：组件挂载完成以后，也就是 DOM 元素已经插入页面后调用。
- componentWillUnmount：组件对应的 DOM 元素从页面中删除之前调用。
但这一节并没有讲这几个方法到底在实际项目当中有什么作用，下一篇通过例子来讲解一下这几个方法的用途。
