React-Native函数式组件如何不依赖状态管理库实现状态提升

函数组件的状态提升逻辑和类组件核心思路完全一致，不需要引入Redux、Context API等额外方案，仅靠React内置的useState和props传参即可实现：将需要共享的状态定义在共同的父组件中，父组件把状态的更新方法通过props传递给子组件，子组件触发修改时调用该方法，就能把状态同步回父组件层级。

具体实现流程 #

• 在父组件中通过useState声明需要跨组件共享的状态，获取状态值和对应的更新函数
• 父组件渲染子组件时，将状态值、状态更新函数都作为props传递给子组件
• 子组件内需要修改共享状态时，直接调用从props拿到的更新函数，传入新的状态值即可，修改会自动同步到父组件，父组件的状态变更也会同步下发到所有绑定该状态的子组件

代码示例 #

父组件代码 #

import { useState } from 'react'
import Child from './Child'

function Parent() {
  // 共享状态定义在父组件层级
  const [formData, setFormData] = useState({
    username: '',
    score: 0
  })

  return (
    <div className="parent-container">
      <h3>父组件层展示共享状态</h3>
      <p>用户名：{formData.username}</p>
      <p>当前分数：{formData.score}</p>
      {/* 下发状态和更新方法给子组件 */}
      <Child 
        sharedState={formData} 
        updateSharedState={setFormData} 
      />
    </div>
  )
}

export default Parent

子组件代码 #

function Child({ sharedState, updateSharedState }) {
  // 子组件内修改用户名
  const handleInputChange = (e) => {
    updateSharedState({
      ...sharedState,
      username: e.target.value
    })
  }

  // 子组件内修改分数
  const handleScoreAdd = () => {
    updateSharedState({
      ...sharedState,
      score: sharedState.score + 10
    })
  }

  return (
    <div className="child-container">
      <h3>子组件层操作</h3>
      <input 
        type="text" 
        value={sharedState.username}
        onChange={handleInputChange}
        placeholder="输入用户名同步到父组件"
      />
      <button onClick={handleScoreAdd}>加10分</button>
    </div>
  )
}

export default Child

适用场景说明 #

• 该方案适合组件嵌套层级浅（父子/爷孙隔1-2层）的状态共享场景，没有额外依赖，实现逻辑简单
• 如果组件嵌套层级过深，逐层传递props会产生冗余代码，这种场景再考虑使用Context API或者其他状态管理方案即可
• 注意不要在子组件中重复声明和父组件同源的本地状态，否则会出现状态不同步的问题，子组件直接消费props传入的状态值即可

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