如何解决 React 中组件传递方法链路很长的问题？

用 context ？

context

context 或者状态管理库

试试这个? /t/786936

方法很多，context 、redux 、发布-订阅模式、甚至 session

state management or context

状态管理 或 pub-sub

我试过 context，可以解决
然后 review 不给过，说 context 不好控制。。

好的，试试 context

context 挺好的

Redux

直接 Redux 了，全局更新，不用管传来传去。

@Leviathann 为啥不好控制?

@HALOZ #5 session 还行，走位风骚

你需要一个状态管理插件，以前我用 redux mobx 。
react 16 推出 hooks 后我使用 https://github.com/jamiebuilds/unstated-next/blob/master/README-zh-cn.md

readme 的指南部分，有介绍这个库的设计思路，就是用简单封装一下 react 的 context api

window (狗头)

let fn = () => {}

const useYourFN = () => {
const [localFn, setLocalFn] = useState(fn)

return {
localFn,
setLocalFn
}
}

@shakukansp 漏了 setLocalFn 外面再套一层设置外部 fn 的方法再 return

context

建议 redux，context 有重渲染的坑

有大佬讲下 context 有什么坑吗 写了 2 年 react 都没咋用过

redux 有点嗦，竟然没有人提 Recoil 。

Dva 走起

mobx 走起

别给新人推荐 redux 了，真的太重了，无论开发速度还是运行速度都慢。context 足够 99%的正常使用了，新人一般没机会遇上那 1%的坑。

这种现象叫 Prop Drilling, 指的是在组件树中，父组件不得不往下传递某些 props 给子组件，但是其本身并不需要使用这些 props 的行为。
1. 使用 Context，Redux 等。不要使用 Legacy 的 Context API 。
2. 改善组件设计，避免多早的把 Render 逻辑拆分为 Component(这会导致 Drilling 程度的加重)，直到需要复用，再进行拆分。
3. 使用 Compound Component Pattern 等方式来进行组件设计，也可以避免这种情况。

什么是 Compund Component Pattern 呢，参考下面的代码形式：

```jsx

import React from "react";
import { Counter } from "./Counter";

function Usage() {
const handleChangeCounter = (count) => {
console.log("count", count);
};

return (
<Counter OnChange={handleChangeCounter}>
<Counter.Decrement icon="minus" />
<Counter.Label>Counter</Counter.Label>
<Counter.Count max={10} />
<Counter.Increment icon="plus" />
</Counter>
);
}

export { Usage };

```

可以试试状态管理器 hox
用 hook 很方便

楼上 hox +1，用了一年多了，很舒适

全局变量系列: redux, pub/sub, 普通模块
上下文系列: context, npm: local thread

排名不分先后

之前写购物车的时候，一开始没上 redux，然后全选 商家选择 商品选择传递勾选状态变更，好家伙给我累的

context 放在逻辑层，ui 组件不要被污染就行