React类组件转换成函数式组件

Hooks让我们为相同的功能编写更少的代码。我们需要编写的代码越少，我们就可以越快地启动应用程序。hooks需要在函数组件中使用。您不能在 React 类中使用 hooks。函数式的 React 组件更加现代，并支持有用的 hooks，现在流行把旧式的类组件转换为函数式组件。这篇文章总结了转换的一些通用的步骤和陷阱。

区别：

性能上的差异较小，取决于代码是怎么写的；
class 和 闭包的区别；
函数思想还是面向对象思想；
需要做到逻辑清晰，低耦合，命名规范；
Hooks 会让代码结构更简单；
Hooks 在每次渲染或者更新都会创建一个函数执行上下文,可以使用 useCallback、useMemo；
Hooks 添加的原因，以及后续对 Hooks 的优化等可以看出 Hooks 肯定是有优于 class 的地方的；
函数组件中不能监听组件的生命周期，useEffect聚合了多个生命周期函数
class组件中生命周期较为复杂
class组件逻辑难以复用（HOC，render props）
函数组件业务代码更加聚合，比如在class 组件中定时器的创建和销毁分别在两个不同的生命周期，但 函数组件只需写在 useEffect 中即可。

性能对比：

差异较小，控制变量法。

步骤：

将class 类定义的React 元素转换成 变量或者函数
class 中的 render 函数 直接去掉，直接return html 元素
将 state 变量使用 useState Hooks 替代
componentDidMount 生命周期使用 useEffect Hooks 替代
componentDidUpdate 生命周期使用 useEffect Hooks 替代
React memo 替代 PureComponent

通用替换

定义

从

class (\w+) extends Component \{

改为

const $1: FC = () => {

• 这是没有 export 和 props 的场景

从

(export) default class (\w+) extends Component \{

改为

$1 const $2: FC<$2Props> = () => {

• 作为第二个捕捉的单词，$2 就是组件名。
• $2Props 应该定义为 props 的接口名。

Attributes 前缀

从

this\.(state\.|props\.)?

改为

• 假设 props 被统一解构。

生命周期函数

从

componentDidMount() { 

改为

useEffect(() => {}, []);

• componentDidUpdate 也可以被转换为 useEffect，并设置合适的依赖。
• componentWillUnmount 可以转换为对应 useEffect 处理函数的返回函数。

State 相关语句

从

state = {
  data: null,
};

改为

const [data, setData] = useState();

从

this.setState({
  data,
});

改为

setData(data)

类方法

从

^(\s*)(\w+)\((\w*)\) \{

改为

$1const $2 = ($3) => {

• 这属于常规函数定义。
• $1 是空格, $2 是方法名, $3 是参数.

从

^(\s*)((\w+) = (async )?\((\w+(, )?)*\) =>)

改为

$1const $2

• 这属于箭头函数定义。
• $1 是空格, $2 方法名之后的所有内容

类 Getter

从

^(\s*)(get) (\w+)\(\)

改为

$1const $2\u$3 = () =>

• \u 表示对后面捕获的单词首字母大写。
• 对 getter 的调用应该在方法名后加上 ()。
• 如果 getter 很简单，可以直接赋值而不用使用函数。

渲染函数

从

render() {
  return (
    <></>
  );
}

改为

return (
  <></>
);

值得关注的陷阱

命名冲突

类组件可以具有同名的 attributes 和 props，例如 this.data 和 this.props.data。
当 this.data 变为 data，另外 props 经常被解构为 const {data} = props，命名冲突 就产生了。

State 回调

通过 this.setState，我们可以设置一个回调，在 state 确实改变时进行调用，但我们需要把这种方式更新为使用更新的 state 作为依赖的 useEffect。

函数 State

如果 state 的值是函数，你需要把这个函数包裹在另一个匿名函数中，否则 hook 版本的 setState 会把这个函数视为回调。
实际上，在大多情况下，这种 state 是和渲染无关的，所以也许使用 useRef 更加合适。

这个文章展示了一些使用 RegExp 的替换，可以使类组件到函数式组件的替换简单点，另外指出了一些在这个过程中你可能会遇到的陷阱，可以特别留意下，不过当然，不同的场景会存在更多的工作要处理。

到此这篇关于React类组件转换成函数式组件的文章就介绍到这了,更多相关React类组件转换函数式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论