如何将React Native类组件的Constructor转换为函数组件？

在React Native开发中，类组件的构造函数核心作用之一是初始化组件状态（state），转为函数组件时，我们需要用React的useState Hook来替代类组件中的this.state。

原类组件构造函数代码 #

类组件构造函数片段

constructor(props) {
     super(props);
      this.state = {
       myText: 'I\'m ready to get swiped!',
       gestureName: 'none',
       backgroundColor: '#fff'
      };
    }

转换后的函数组件代码 #

函数组件实现

import { useState } from 'react';

const Component = () => {
  // 逐个声明状态变量及对应的更新函数
  const [myText, setMyText] = useState("I'm ready to get swiped!");
  const [gestureName, setGestureName] = useState("none");
  const [backgroundColor, setBackgroundColor] = useState("#fff");
};

补充：合并状态的写法（可选） #

如果你倾向于将状态合并管理，也可以用单个useState声明对象类型的状态，不过更新时需要注意保留原有状态：

import { useState } from 'react';

const Component = () => {
  const [state, setState] = useState({
    myText: "I'm ready to get swiped!",
    gestureName: "none",
    backgroundColor: "#fff"
  });

  // 更新单个状态示例
  const updateMyText = () => {
    setState(prevState => ({
      ...prevState,
      myText: "Updated text!"
    }));
  };
};

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