B
B
Blog
搜索文档…
⌃K

React-生命周期方法转 Hooks-1

Tag: React, Hooks, Life cycle
由于特殊需求,要把一个旧 React 项目转 Hooks,发现自己在 React 生命周期方法转 Hooks 时竟然还需要翻官方文档,真是惊掉下巴了。
Function Component 不存在生命周期,所以不要把 Class Component 的生命周期概念搬过来试图对号入座。
本文仅供部分生命周期方便快速转 Hooks, 并不代表所有生命周期方法都可以使用 Hooks 改写, 还需要根据具体使用场景分析。

生命周期图

先上 React 的生命周期图:
  1. 1.
    旧生命周期图
  2. 2.
    新生命周期图

生命周期方法转 Hooks

componentDidMount

难易程度:*
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;
}

componentDidUpdate

难易程度:***
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;
}

componentWillUnmount

难易程度:*
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 理解,同时也为有需要者提供直接而有效的快速转换示例)