React 第六章 生命周期
什么是生命周期
生命周期是一个物体、生物或概念从诞生、成长、衰老到死亡的过程。
React 在组件的生命周期中提供了一系列的钩子函数（类似于事件），可以让开发者在函数中注入代码，这些代码会在适当的时候运行。
生命周期钩子函数是属于类组件所独有的东西，但是从 React 16.8 推出 Hooks 以来，整体已经开始以函数组件为主，因此这里我们仅介绍一些常用的生命周期钩子函数。
完整的生命周期图谱，可以参阅官网：https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
常用的生命周期钩子函数
有关生命周期钩子函数的介绍，可以参阅官网：https://zh-hans.reactjs.org/docs/react-component.html
官网中在介绍这些钩子函数时，也是分为了常用和不常用两大块来介绍的。
由于现在react 已经不在推荐使用类组件，所以只简单了解常用的生命周期即可。后续如果有老项目维护，可以自行查阅。
常用的生命周期钩子函数如下：
-
constructor
- 同一个组件对象只会创建一次
- 不能在第一次挂载到页面之前，调用 setState，为了避免问题，构造函数中严禁使用 setState
-
render
- render 是整个类组件中必须要书写的生命周期方法
- 当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一
-
React 元素。通常通过 JSX 创建。例如，
<div />会被 React 渲染为 DOM 节点，<MyComponent />会被 React 渲染为自定义组件，无论是<div />还是<MyComponent />均为 React 元素。 -
数组或 fragments。 使得 render 方法可以返回多个元素。欲了解更多详细信息，请参阅 fragments 文档。
-
Portals。可以渲染子节点到不同的 DOM 子树中。欲了解更多详细信息，请参阅有关 portals 的文档。
-
字符串或数值类型。它们在 DOM 中会被渲染为文本节点。
-
布尔类型或 null 或者 undefined。什么都不渲染。（主要用于支持 return test && 的模式，其中 test 为布尔类型。)
-
- render 可能不只运行一次，只要需要重新渲染，就会重新运行
- 严禁使用 setState，因为可能会导致无限递归渲染
import React from "react";
// 类组件
class App extends React.Component {
constructor() {
super();
// 主要做一些初始化操作，例如该组件的状态
this.state = {
value : 1
}
console.log("constructor");
}
clickHandle=()=>{
this.setState({
value : this.state.value + 1
})
}
render() {
console.log("render");
return (
<div>
<div>{this.state.value}</div>
<button onClick={this.clickHandle}>+1</button>
</div>
)
}
}
export default App;
- componentDidMount
- 类似于 Vue 里面的 mounted
- 只会执行一次
- 可以使用 setState
- 通常情况下，会将网络请求、启动计时器等一开始需要的操作，书写到该函数中
- componentWillUnmount
- 通常在该函数中销毁一些组件依赖的资源，比如计时器
原文地址：https://blog.csdn.net/aXin_li/article/details/136496963
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！