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

[xrr2016]

一个组件 A 的方法通过 props 传递到组件 B 然后到组件 C 再到 D 再到 E...

这样的写法找起来真是痛苦啊，所以如何解决这种问题呢？

网上搜了一圈没找到方案，所以来问下哈哈哈

找到了使用 Context 的方法

https://kentcdodds.com/blog/prop-drilling

https://medium.com/swlh/avoid-prop-drilling-with-react-context-a00392ee3d8

https://zh-hans.reactjs.org/docs/context.html#dynamic-context

[Puteulanus]

用 context ？

[P233]

context

[fengfuliu]

context 或者状态管理库

[qingzhan]

试试这个? /t/786936

[HALOZ]

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

[gxm44]

state management or context

[zhuweiyou]

状态管理 或 pub-sub

[Leviathann]

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

[xrr2016]

好的，试试 context

[KuroNekoFan]

context 挺好的

[Cuo]

Redux

[newbieRenew]

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

[xrr2016]

@Leviathann 为啥不好控制?

[xwchenhui]

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

[Imindzzz]

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

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

[musi]

window (狗头)

[shakukansp]

let fn = () => {}

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

return {
localFn,
setLocalFn
}
}

[shakukansp]

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

[susumail]

context

[JerryCha]

建议 redux，context 有重渲染的坑

[frankwei777]

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

[Hanggi]

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

[fantastic]

Dva 走起

[zinete]

mobx 走起

[Rocketer]

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

[rioshikelong121]

这种现象叫 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 };

```

[TrickWu]

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

[ruoxie]

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

[netwjx]

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

排名不分先后

[xutao881]

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

[mandoon]

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