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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› React

这是一个创建于 1238 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

第 1 条附言 · 2021-07-15 10:48:27 +08:00

找到了使用 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

组件

props

React

写法

31 条回复 • 2021-07-16 05:34:06 +08:00

Puteulanus

2021-07-14 15:26:01 +08:00

用 context ？

P233

2021-07-14 15:27:17 +08:00

context

fengfuliu

2021-07-14 15:28:53 +08:00

context 或者状态管理库

qingzhan

2021-07-14 15:30:04 +08:00

试试这个? /t/786936

HALOZ

2021-07-14 15:53:43 +08:00

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

gxm44

2021-07-14 16:04:01 +08:00

state management or context

zhuweiyou

2021-07-14 16:05:34 +08:00

状态管理或 pub-sub

Leviathann

2021-07-14 16:15:48 +08:00 via iPhone

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

xrr2016

2021-07-14 16:32:21 +08:00

好的，试试 context

KuroNekoFan

2021-07-14 16:33:11 +08:00

context 挺好的

Cuo

2021-07-14 16:44:55 +08:00 via iPhone

Redux

newbieRenew

2021-07-14 16:51:47 +08:00 via iPhone

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

xrr2016

2021-07-14 17:04:19 +08:00

@Leviathann 为啥不好控制?

xwchenhui

2021-07-14 17:12:46 +08:00

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

Imindzzz

2021-07-14 17:33:59 +08:00

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

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

musi

2021-07-14 17:50:36 +08:00

window (狗头)

shakukansp

2021-07-14 18:31:08 +08:00

let fn = () => {}

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

return {
localFn,
setLocalFn
}
}

shakukansp

2021-07-14 18:32:52 +08:00

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

susumail

2021-07-14 18:39:29 +08:00 via iPhone

context

JerryCha

2021-07-14 19:46:35 +08:00

建议 redux，context 有重渲染的坑

frankwei777

2021-07-14 19:57:58 +08:00

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

Hanggi

2021-07-14 20:43:55 +08:00

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

fantastic

2021-07-14 22:00:26 +08:00

Dva 走起

zinete

2021-07-14 22:15:40 +08:00

mobx 走起

Rocketer

2021-07-15 06:00:52 +08:00 via iPhone

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

rioshikelong121

2021-07-15 08:58:58 +08:00

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

```