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

V2EX = way to explore

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

For Existing Member Sign In

› React

This topic created in 1748 days ago, the information mentioned may be changed or developed.

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

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

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

Supplement 1 · Jul 15, 2021

找到了使用 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 replies • 2021-07-16 05:34:06 +08:00

Puteulanus

Jul 14, 2021

用 context ？

P233

Jul 14, 2021

context

fengfuliu

Jul 14, 2021

context 或者状态管理库

qingzhan

Jul 14, 2021

试试这个? /t/786936

HALOZ

Jul 14, 2021

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

gxm44

Jul 14, 2021

state management or context

zhuweiyou

Jul 14, 2021

状态管理或 pub-sub

Leviathann

Jul 14, 2021 via iPhone

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

xrr2016

Jul 14, 2021

好的，试试 context

KuroNekoFan

Jul 14, 2021

context 挺好的

Cuo

Jul 14, 2021 via iPhone

Redux

newbieRenew

Jul 14, 2021 via iPhone

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

xrr2016

Jul 14, 2021

@Leviathann 为啥不好控制?

xwchenhui

Jul 14, 2021

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

Imindzzz

PRO

Jul 14, 2021

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

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

musi

Jul 14, 2021

window (狗头)

shakukansp

Jul 14, 2021

let fn = () => {}

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

return {
localFn,
setLocalFn
}
}

shakukansp

Jul 14, 2021

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

susumail

Jul 14, 2021 via iPhone

context

JerryCha

Jul 14, 2021

建议 redux，context 有重渲染的坑

frankwei777

Jul 14, 2021

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

Hanggi

Jul 14, 2021

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

fantastic

Jul 14, 2021

Dva 走起

zinete

Jul 14, 2021

mobx 走起

Rocketer

Jul 15, 2021 via iPhone

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

rioshikelong121

Jul 15, 2021

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

```