React中非后代组件如何传递setState函数？兼谈组件复用与useContext

核心场景 #

• ChildComponentB 拥有状态 stateX，需要在 ChildComponentA 触发事件时修改该状态，但两者并非父子嵌套关系，而是同属一个父组件的同级组件。
• 实际业务场景：Canvas组件下包含静态矩形组件（rectComponent）和指示线组件（distanceIndicatorsComponent），当鼠标移至矩形边缘时，需给指示线组件添加线条。但rectComponent并非distanceIndicatorsComponent的后代组件，无法直接传递setLines方法。

useContext方案的可行性探讨 #

感谢@KonradLinkowski提供的useContext实现方案，代码如下，但该方案仍需将状态提升至共同的父组件：

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

const Context = createContext();

function ChildComponentA(props) {
  const { setStateX } = useContext(Context);

  return (
    <div>
      componentA button:{" "}
      <button onClick={() => setStateX((i) => i + 1)}>add</button>
    </div>
  );
}

function ChildComponentB(props) {
  const { stateX } = useContext(Context);

  return <div> stateX is {stateX} </div>;
}

export default function ParentComponent(props) {
  const [stateX, setStateX] = useState(0);
  return (
    <>
      <Context.Provider value={{ stateX, setStateX }}>
        <ChildComponentA />
        <ChildComponentB />
      </Context.Provider>
    </>
  );
}

关于组件复用性的思考 #

• distanceIndicatorsComponent（即上述的ChildComponentB）包含JSX结构、内部状态及状态修改逻辑接口，这些都应具备复用性。
• 从OOP封装视角看，lines状态属于DistanceIndicatorsComponent，修改lines的逻辑也应归为该组件的可复用逻辑范畴。
• 但从React状态管理的角度，将setLines提升至CanvasComponent的做法，违背了OOP的封装原则；若将lines和setLines都提升到CanvasComponent，组件的封装性会大打折扣。给ComponentB套一层父组件也无法解决问题，除非FrameComponent是这个新父组件的子组件，否则仍无法传递setLines方法。
• 常见的"顶层重型组件承载所有状态和事件"属于代码坏味。组件复用应该基于一组组件：顶层为非受控组件，下方是受控组件，共同构成可外部复用的单元。
• 本场景应该存在多个复用单元，如果把状态提升至CanvasComponent，会导致其下属组件无法独立复用；虽然能复用JSX结构，但复用性应该覆盖更多的逻辑层面。

可能我的理解存在偏差，恳请指正，感谢分享宝贵意见。

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