一个组件 A 的方法通过 props 传递到组件 B 然后到组件 C 再到 D 再到 E...
这样的写法找起来真是痛苦啊,所以如何解决这种问题呢?
网上搜了一圈没找到方案,所以来问下哈哈哈
1
Puteulanus 2021-07-14 15:26:01 +08:00 2
用 context ?
|
2
P233 2021-07-14 15:27:17 +08:00
context
|
3
fengfuliu 2021-07-14 15:28:53 +08:00
context 或者状态管理库
|
5
HALOZ 2021-07-14 15:53:43 +08:00
方法很多,context 、redux 、发布-订阅模式、甚至 session
|
6
gxm44 2021-07-14 16:04:01 +08:00
state management or context
|
7
zhuweiyou 2021-07-14 16:05:34 +08:00
状态管理 或 pub-sub
|
8
Leviathann 2021-07-14 16:15:48 +08:00 via iPhone
我试过 context,可以解决
然后 review 不给过,说 context 不好控制。。 |
9
xrr2016 OP 好的,试试 context
|
10
KuroNekoFan 2021-07-14 16:33:11 +08:00
context 挺好的
|
11
Cuo 2021-07-14 16:44:55 +08:00 via iPhone
Redux
|
12
newbieRenew 2021-07-14 16:51:47 +08:00 via iPhone
直接 Redux 了,全局更新,不用管传来传去。
|
13
xrr2016 OP @Leviathann 为啥不好控制?
|
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 |
16
musi 2021-07-14 17:50:36 +08:00
window (狗头)
|
17
shakukansp 2021-07-14 18:31:08 +08:00
let fn = () => {}
const useYourFN = () => { const [localFn, setLocalFn] = useState(fn) return { localFn, setLocalFn } } |
18
shakukansp 2021-07-14 18:32:52 +08:00
@shakukansp 漏了 setLocalFn 外面再套一层设置外部 fn 的方法再 return
|
19
susumail 2021-07-14 18:39:29 +08:00 via iPhone
context
|
20
JerryCha 2021-07-14 19:46:35 +08:00
建议 redux,context 有重渲染的坑
|
21
frankwei777 2021-07-14 19:57:58 +08:00
有大佬讲下 context 有什么坑吗 写了 2 年 react 都没咋用过
|
22
Hanggi 2021-07-14 20:43:55 +08:00
redux 有点啰嗦,竟然没有人提 Recoil 。
|
23
fantastic 2021-07-14 22:00:26 +08:00
Dva 走起
|
24
zinete 2021-07-14 22:15:40 +08:00
mobx 走起
|
25
Rocketer 2021-07-15 06:00:52 +08:00 via iPhone
别给新人推荐 redux 了,真的太重了,无论开发速度还是运行速度都慢。context 足够 99%的正常使用了,新人一般没机会遇上那 1%的坑。
|
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 }; ``` |
27
TrickWu 2021-07-15 09:44:09 +08:00
可以试试状态管理器 hox
用 hook 很方便 |
28
ruoxie 2021-07-15 09:49:06 +08:00
楼上 hox +1,用了一年多了,很舒适
|
29
netwjx 2021-07-15 11:38:35 +08:00
全局变量系列: redux, pub/sub, 普通模块
上下文系列: context, npm: local thread 排名不分先后 |
30
xutao881 2021-07-15 12:58:14 +08:00
之前写购物车的时候,一开始没上 redux,然后全选 商家选择 商品选择传递勾选状态变更,好家伙给我累的
|
31
mandoon 2021-07-16 05:34:06 +08:00
context 放在逻辑层,ui 组件不要被污染就行
|