React单文件内的函数式组件之间如何实现state状态传递？

React组件的内部状态默认是私有属性，其他组件无法直接访问，你可以根据场景选择以下两种实现方案：

方案1：状态提升（简单场景优先推荐） #

适合两个组件为兄弟/有公共父组件的场景，将需要共享的state从原来的组件内部提升到公共父组件统一管理，再通过props将状态和状态更新方法传递给需要用到的子组件即可。
改造后的完整代码示例：

import React, { useState } from 'react';

// 步数统计组件：接收父组件传入的步数和递增方法
export function StepTracker(props) {
  return (
    <div>
      你今天已经走了{props.steps}步！
      <br />
      <button onClick={props.increment}>
        我又走了一步
      </button>
    </div>
  );
}

// 目标组件：直接使用父组件传入的步数状态
export function FuncName(props){
  return(<div>{props.steps}</div>)
}

// 公共父组件示例（实际使用时可以是任意引用这两个组件的父组件）
function Parent() {
  // 将原本属于StepTracker的状态提升到父级管理
  const [steps, setSteps] = useState(0);

  function increment() {
    setSteps(prevState => prevState + 1);
  }

  return (
    <div>
      <StepTracker steps={steps} increment={increment} />
      <FuncName steps={steps} />
    </div>
  )
}

export default Parent

方案2：Context API（适合层级较深的组件共享状态） #

如果两个组件嵌套层级很深，逐层传递props比较繁琐，可以用React内置的Context API实现跨层级状态共享，示例代码如下：

import React, { useState, createContext, useContext } from 'react';

// 创建步数上下文
const StepsContext = createContext();

// 上下文Provider组件，包裹需要共享状态的子组件
export function StepsProvider({ children }) {
  const [steps, setSteps] = useState(0);

  function increment() {
    setSteps(prevState => prevState + 1);
  }

  return (
    <StepsContext.Provider value={{ steps, increment }}>
      {children}
    </StepsContext.Provider>
  )
}

// 自定义Hook简化上下文调用
export function useSteps() {
  return useContext(StepsContext);
}

// 步数统计组件：直接从上下文取状态和方法
export function StepTracker() {
  const { steps, increment } = useSteps();
  return (
    <div>
      你今天已经走了{steps}步！
      <br />
      <button onClick={increment}>
        我又走了一步
      </button>
    </div>
  );
}

// 目标组件：直接从上下文取步数状态
export function FuncName(){
  const { steps } = useSteps();
  return(<div>{steps}</div>)
}

使用时只需要在根组件包裹StepsProvider即可：

import { StepsProvider, StepTracker, FuncName } from './你的文件路径';

function App() {
  return (
    <StepsProvider>
      <StepTracker />
      <FuncName />
    </StepsProvider>
  )
}

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