React Native类组件转函数组件的状态处理疑问

状态改写核心对应规则 #

• 类组件的实例状态state = { selectedFruits: [] }，替换为useState Hook初始化：const [selectedFruits, setSelectedFruits] = useState([])
• 类组件中通过this.state.xxx读取状态的地方，直接使用useState返回的第一个变量即可
• 类组件中调用this.setState({ xxx })的逻辑，直接调用useState返回的第二个更新函数，传入新值即可，不需要包裹对象结构
• 原类中绑定的事件方法，不需要处理this指向，直接在函数组件内部定义普通函数即可使用

useState的入参为状态的初始值，返回数组的第一个元素是当前状态值，第二个是用于更新该状态的函数；函数组件中可以拆分多个独立的useState来管理不同状态，不需要把所有状态嵌套在同一个顶层state对象中。

完整转换后代码 #

import React, { useState } from 'react'
import { View } from 'react-native'
import SelectMultiple from 'react-native-select-multiple'

const fruits = ['Apples', 'Oranges', 'Pears']
// --- OR ---
// const fruits = [
//   { label: 'Apples', value: 'appls' },
//   { label: 'Oranges', value: 'orngs' },
//   { label: 'Pears', value: 'pears' }
// ]

function Fruits ({navigation}) {
  // 初始化选中水果的状态，入参和原类组件state初始值保持一致
  const [selectedFruits, setSelectedFruits] = useState([])

  // 处理选择变化的逻辑，和原类的onSelectionsChange逻辑完全对齐
  const onSelectionsChange = (selectedFruits) => {
    setSelectedFruits(selectedFruits)
  }

  return (
    <View>
      <SelectMultiple
        items={fruits}
        selectedItems={selectedFruits}
        onSelectionsChange={onSelectionsChange} />
    </View>
  )
}

export default Fruits

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