React Native中如何将类组件状态逻辑转换为函数组件写法

直接使用React内置的useState Hook替代类组件的this.state/this.setState状态管理方案即可，核心判断逻辑不需要改动，只需要调整状态读写的写法。

• 导入需要用到的Hook

import React, { useState, useEffect } from 'react';

• 声明对应状态
  和类组件state里的字段一一对应即可，初始值和你原有业务的初始值保持一致：

// eventDate的初始值替换为你业务里原本的初始值，比如倒计时的初始时长
const [eventDate, setEventDate] = useState(0);
const [isTimerOver, setIsTimerOver] = useState(false);

小提示：函数组件拆分声明的状态是独立的，调用对应更新方法时只会修改当前状态值，不会像类组件setState一样自动合并state对象，不需要担心影响其他状态。

• 替换原有判断逻辑
  把你类组件里的对应代码块替换成下面的写法即可，不需要通过this访问实例属性：

if (eventDate <= 0) {
  setIsTimerOver(true);
}

• 按业务场景放置逻辑
  • 如果需要eventDate变化时自动执行判断，把逻辑放到useEffect里，监听eventDate变动即可：

    useEffect(() => {
      if (eventDate <= 0) {
        setIsTimerOver(true);
      }
    }, [eventDate]);
    

  • 如果判断是在按钮点击、定时器回调等手动触发的场景里执行，直接把判断逻辑写到对应回调函数中就行，不需要额外包裹useEffect。

内容的提问来源于stack exchange，提问作者nim