无需传递state与setter作为Props，如何在React子组件中更新父组件状态？

嘿，这个问题我之前也碰到过，每次要么把整个state和setState都传给子组件，要么拆成一堆独立state传好几个setter，确实挺繁琐的。给你分享几个更优雅的解决方案，按需选择就行：

方案一：父组件封装专属更新函数（最推荐，低耦合） #

核心思路是在父组件里把特定属性的更新逻辑封装成单独的函数，子组件只需要调用这个函数就行，完全不用关心state的结构和更新细节，耦合度极低。

const ParentComponent = () => { 
  const [state, setState] = useState({a: 1, b: 2}) 

  // 专门封装更新b属性的函数
  const incrementB = () => {
    // 用prevState避免依赖当前state快照，异步更新场景更安全
    setState(prevState => ({ ...prevState, b: prevState.b + 1 }))
  }

  // 如果需要更新a，同理封装updateA
  const updateA = (newValue) => {
    setState(prevState => ({ ...prevState, a: newValue }))
  }

  return <ChildComponent incrementB={incrementB} updateA={updateA} /> 
} 

const ChildComponent = ({ incrementB, updateA }) => { 
  return (
    <div>
      <button onClick={incrementB}>把B加1</button>
      <button onClick={() => updateA(10)}>把A改成10</button>
    </div>
  )
}

这种方式的好处是子组件完全不用知道父组件state的结构，就算以后父组件state改了，只要更新封装的函数，子组件完全不用动，维护起来超省心。

方案二：用useReducer管理复杂状态（适合多属性/复杂更新） #

如果你的state属性很多，或者更新逻辑比较复杂（比如多个属性联动更新），用useReducer会比useState更清晰，把所有更新逻辑集中到reducer里，子组件只需要通过dispatch发"动作"就行。

// 先定义reducer函数，集中处理所有状态更新逻辑
const stateReducer = (state, action) => {
  switch(action.type) {
    case 'INCREMENT_B':
      return { ...state, b: state.b + 1 }
    case 'UPDATE_A':
      return { ...state, a: action.payload }
    // 以后加新属性，直接加case就行
    case 'RESET_STATE':
      return { a: 1, b: 2 }
    default:
      return state
  }
}

const ParentComponent = () => { 
  const [state, dispatch] = useReducer(stateReducer, {a: 1, b: 2}) 

  return <ChildComponent dispatch={dispatch} /> 
} 

const ChildComponent = ({ dispatch }) => { 
  return (
    <div>
      <button onClick={() => dispatch({ type: 'INCREMENT_B' })}>把B加1</button>
      <button onClick={() => dispatch({ type: 'UPDATE_A', payload: 15 })}>把A改成15</button>
      <button onClick={() => dispatch({ type: 'RESET_STATE' })}>重置状态</button>
    </div>
  )
}

这种方式的扩展性很强，状态更新逻辑都在reducer里，后期维护和调试都更方便，适合中大型组件的状态管理。

方案三：利用useState的函数式更新（快速简化） #

如果不想封装太多函数，也可以直接利用setState的函数式更新特性，子组件只需要接收setState，不用传整个state，因为函数式更新会拿到最新的prevState。

const ParentComponent = () => { 
  const [state, setState] = useState({a: 1, b: 2}) 
  return <ChildComponent setState={setState} /> 
} 

const ChildComponent = ({ setState }) => { 
  return (
    <button onClick={() => {
      // 直接用prevState获取最新状态，不用依赖父组件传过来的state
      setState(prevState => ({...prevState, b: prevState.b + 1}))
    }}>把B加1</button>
  )
}

这个方式比你原来的代码简洁，不用传state了，但子组件还是需要知道父组件state的结构，耦合度比方案一高一点，适合简单场景快速处理。

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