## :-: 組件生命周期
[State & 生命周期](https://react.docschina.org/docs/state-and-lifecycle.html)
```
import React from "react";
class LifeCyle extends React.Component {
static defaultProps = {};
static propTypes = {};
constructor() {
console.log(1, "constructor");
super();
this.state = {};
}
// // 將要被掛載
// componentWillMount() {
// // 官方不建議這里進行ajax 16.3版本后移除了componentWillMount
// console.log(2, "componentWillMount");
// }
// 16.3版本新增加
static getDerivedStateFromProps() {
// 第一次掛載也會執行
// 必須有返回值
return null;
}
// 開始渲染
render() {
// 不要調用this.setState、函數會被重復多次執行(死循環)
console.log(3, "render");
return <div>123</div>;
}
// 已經被掛載
componentDidMount() {
// 在這里就可以愉快的調用ajax請求了、、
// ajax this.setState
console.log(4, "componentDidMount");
}
// // props 數據被改變時執行
// componentWillReceiveProps() {
// // 第一次掛載不執行,之后執行
// // 官方不建議這里進行ajax 16.3版本后移除了componentWillReceiveProps
// console.log(8, "componentWillReceiveProps");
// }
// 數據將要被更改時執行
shouldComponentUpdate(nextProps, nextState) {
// nextProps -- 將要被改變的值
// nextState -- 將要被改變的狀態
// 優化性能
console.log(5, "componentDidMount");
// 返回 true更新視圖、false不更新視圖
return false;
}
// 16.3版本新增加
// getSnapshotBeforeUpdate 跟 componentDidUpdate 是成對出現的、
getSnapshotBeforeUpdate() {
// 必須有返回值
return null;
}
// // 將要更新視圖
// componentWillUpdate() {
// // 16.3版本后移除了componentWillUpdate
// // 不能設置狀態(死循環)
// console.log(6, "componentWillUpdate");
// }
// 更新完畢
componentDidUpdate() {
// 不能設置狀態(死循環)
console.log(7, "componentDidUpdate");
}
// 組件將要被卸載、移除
componentWillUnmount() {
console.log(9, "componentWillUnmount");
}
}
export default LifeCyle;
```
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request