React-生命周期方法转 Hooks-1
Tag: React, Hooks, Life cycle
由于特殊需求，要把一个旧 React 项目转 Hooks，发现自己在 React 生命周期方法转 Hooks 时竟然还需要翻官方文档，真是惊掉下巴了。
Function Component 不存在生命周期，所以不要把 Class Component 的生命周期概念搬过来试图对号入座。
本文仅供部分生命周期方便快速转 Hooks, 并不代表所有生命周期方法都可以使用 Hooks 改写, 还需要根据具体使用场景分析。
先上 React 的生命周期图：
- 1.旧生命周期图
- 2.新生命周期图
难易程度：*
import React from 'react';
class Component extends React.Component {
componentDidMount() {
console.log('componentDidMount');
}
render() {
return null;
}
}
import React, {useEffect} from 'react';
function Component() {
useEffect(() => {
console.log('componentDidMount');
}, []);
return null;
}
难易程度：***
import React from 'react';
class Component extends React.Component {
componentDidUpdate() {
console.log('componentDidUpdate');
}
}
import React, {useEffect, useState} from 'react';
function Component() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`componentDidMount or all state/props's componentDidUpdate`);
});
useEffect(() => {
console.log(`componentDidMount or count's componentDidUpdate`);
}, [count]);
return null;
}
难易程度：*
import React from 'react';
class Component extends React.Component {
componentWillUnmount() {
console.log('componentWillUnmount');
}
}
import React, {useEffect} from 'react';
function Component() {
useEffect(() => {
// return's callback will be called only when componentWillUnmount
return () => {
console.log(`componentWillUnmount`);
}
});
return null;
}
以上生命周期方法可以直接套用对应的 hooks 示例，其他生命周期方法会在（2）中继续整理。 （本文意在巩固自己对 Hooks 理解，同时也为有需要者提供直接而有效的快速转换示例）