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

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

  •  
  •   xrr2016 ·
    xrr2016 · 2021-07-14 15:16:26 +08:00 · 3234 次点击
    这是一个创建于 1207 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    31 条回复    2021-07-16 05:34:06 +08:00
    Puteulanus
        1
    Puteulanus  
       2021-07-14 15:26:01 +08:00   ❤️ 2
    用 context ?
    P233
        2
    P233  
       2021-07-14 15:27:17 +08:00
    context
    fengfuliu
        3
    fengfuliu  
       2021-07-14 15:28:53 +08:00
    context 或者状态管理库
    qingzhan
        4
    qingzhan  
       2021-07-14 15:30:04 +08:00
    试试这个? /t/786936
    HALOZ
        5
    HALOZ  
       2021-07-14 15:53:43 +08:00
    方法很多,context 、redux 、发布-订阅模式、甚至 session
    gxm44
        6
    gxm44  
       2021-07-14 16:04:01 +08:00
    state management or context
    zhuweiyou
        7
    zhuweiyou  
       2021-07-14 16:05:34 +08:00
    状态管理 或 pub-sub
    Leviathann
        8
    Leviathann  
       2021-07-14 16:15:48 +08:00 via iPhone
    我试过 context,可以解决
    然后 review 不给过,说 context 不好控制。。
    xrr2016
        9
    xrr2016  
    OP
       2021-07-14 16:32:21 +08:00
    好的,试试 context
    KuroNekoFan
        10
    KuroNekoFan  
       2021-07-14 16:33:11 +08:00
    context 挺好的
    Cuo
        11
    Cuo  
       2021-07-14 16:44:55 +08:00 via iPhone
    Redux
    newbieRenew
        12
    newbieRenew  
       2021-07-14 16:51:47 +08:00 via iPhone
    直接 Redux 了,全局更新,不用管传来传去。
    xrr2016
        13
    xrr2016  
    OP
       2021-07-14 17:04:19 +08:00
    @Leviathann 为啥不好控制?
    xwchenhui
        14
    xwchenhui  
       2021-07-14 17:12:46 +08:00
    @HALOZ #5 session 还行,走位风骚
    Imindzzz
        15
    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
        16
    musi  
       2021-07-14 17:50:36 +08:00
    window (狗头)
    shakukansp
        17
    shakukansp  
       2021-07-14 18:31:08 +08:00
    let fn = () => {}

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

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

    排名不分先后
    xutao881
        30
    xutao881  
       2021-07-15 12:58:14 +08:00
    之前写购物车的时候,一开始没上 redux,然后全选 商家选择 商品选择传递勾选状态变更,好家伙给我累的
    mandoon
        31
    mandoon  
       2021-07-16 05:34:06 +08:00
    context 放在逻辑层,ui 组件不要被污染就行
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2642 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 12:18 · PVG 20:18 · LAX 05:18 · JFK 08:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.