V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xrr2016
V2EX  ›  React

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

  •  
  •   xrr2016 · 136 天前 · 2187 次点击
    这是一个创建于 136 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    31 条回复    2021-07-16 05:34:06 +08:00
    Puteulanus
        1
    Puteulanus   136 天前   ❤️ 2
    用 context ?
    P233
        2
    P233   136 天前
    context
    fengfuliu
        3
    fengfuliu   136 天前
    context 或者状态管理库
    qingzhan
        4
    qingzhan   136 天前
    试试这个? /t/786936
    HALOZ
        5
    HALOZ   136 天前
    方法很多,context 、redux 、发布-订阅模式、甚至 session
    gxm44
        6
    gxm44   136 天前
    state management or context
    zhuweiyou
        7
    zhuweiyou   136 天前
    状态管理 或 pub-sub
    Leviathann
        8
    Leviathann   136 天前 via iPhone
    我试过 context,可以解决
    然后 review 不给过,说 context 不好控制。。
    xrr2016
        9
    xrr2016   136 天前
    好的,试试 context
    KuroNekoFan
        10
    KuroNekoFan   136 天前
    context 挺好的
    Cuo
        11
    Cuo   136 天前 via iPhone
    Redux
    newbieRenew
        12
    newbieRenew   136 天前 via iPhone
    直接 Redux 了,全局更新,不用管传来传去。
    xrr2016
        13
    xrr2016   136 天前
    @Leviathann 为啥不好控制?
    xwchenhui
        14
    xwchenhui   136 天前
    @HALOZ #5 session 还行,走位风骚
    xd199153
        15
    xd199153   136 天前
    你需要一个状态管理插件,以前我用 redux mobx 。
    react 16 推出 hooks 后我使用 https://github.com/jamiebuilds/unstated-next/blob/master/README-zh-cn.md

    readme 的指南部分,有介绍这个库的设计思路,就是用简单封装一下 react 的 context api
    musi
        16
    musi   136 天前
    window (狗头)
    shakukansp
        17
    shakukansp   136 天前
    let fn = () => {}

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

    return {
    localFn,
    setLocalFn
    }
    }
    shakukansp
        18
    shakukansp   136 天前
    @shakukansp 漏了 setLocalFn 外面再套一层设置外部 fn 的方法再 return
    susumail
        19
    susumail   136 天前 via iPhone
    context
    JerryCha
        20
    JerryCha   136 天前
    建议 redux,context 有重渲染的坑
    frankwei777
        21
    frankwei777   136 天前
    有大佬讲下 context 有什么坑吗 写了 2 年 react 都没咋用过
    Hanggi
        22
    Hanggi   136 天前
    redux 有点啰嗦,竟然没有人提 Recoil 。
    fantastic
        23
    fantastic   136 天前
    Dva 走起
    zinete
        24
    zinete   136 天前
    mobx 走起
    Rocketer
        25
    Rocketer   136 天前 via iPhone
    别给新人推荐 redux 了,真的太重了,无论开发速度还是运行速度都慢。context 足够 99%的正常使用了,新人一般没机会遇上那 1%的坑。
    rioshikelong121
        26
    rioshikelong121   135 天前   ❤️ 2
    这种现象叫 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
        27
    TrickWu   135 天前
    可以试试状态管理器 hox
    用 hook 很方便
    ruoxie
        28
    ruoxie   135 天前
    楼上 hox +1,用了一年多了,很舒适
    netwjx
        29
    netwjx   135 天前
    全局变量系列: redux, pub/sub, 普通模块
    上下文系列: context, npm: local thread

    排名不分先后
    xutao881
        30
    xutao881   135 天前
    之前写购物车的时候,一开始没上 redux,然后全选 商家选择 商品选择传递勾选状态变更,好家伙给我累的
    mandoon
        31
    mandoon   135 天前
    context 放在逻辑层,ui 组件不要被污染就行
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1318 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 00:08 · PVG 08:08 · LAX 16:08 · JFK 19:08
    ♥ Do have faith in what you're doing.