baxtergu 最近的时间轴更新
baxtergu

baxtergu

V2EX 第 257873 号会员,加入于 2017-10-05 23:35:25 +08:00
今日活跃度排名 6068
baxtergu 最近回复了
看了上面的问题,我理解你的担心是如果存在多 redux Store 实例的情况下,由 Context-Provider 向下传入的 store value 会不会被互相覆盖,其实 react-redux 提供了多实例的使用方式,使用起来会增加你应用开发的复杂度,具体链接: https://react-redux.js.org/using-react-redux/accessing-store#multiple-stores 。(需要在 Provider 中和组件的 connect 中手动指定 Context 实例方式手工指定 store 的来源)

但是不推荐你这么做,因为会让使用你组件的开发者带来不小的心智负担。

- - -

假设你的组件逻辑非常复杂(如:富文本编辑器、拖拽组件等)一定要选一种数据流方案将逻辑外置的话,推荐你用 mobx (开启严格模式),但是使用时候一定要注意 mobx 获取的所有对象实例都是 mutable 的,有时候需要手动去处理引用相等问题导致组件不更新,最新版的 mobx-react 也是对 hooks api 很友好的,非常方便。

- - -

最推荐的做法还是使用 Context + useReducer 来自定义 hooks 方式来解决你的问题,根据你上面的描述这种方式完全可以满足你的需求。
2021-01-14 11:48:47 +08:00
回复了 sillydaddy 创建的主题 React react 怎样处理父元素的 blur 事件啊??
MDN 上关于 relatedTarget 的解释: https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget

不同事件的 relatedTarget 不太一样
2021-01-14 11:47:10 +08:00
回复了 sillydaddy 创建的主题 React react 怎样处理父元素的 blur 事件啊??
CodeSandBox: https://codesandbox.io/s/onblur-bubble-preventiton-ngsdj?file=/src/App.js

核心思路是利用 event.relatedTarget 这个属性来判断失焦是来自内部还是外部。代码如下:

import React, { useRef } from "react";
import "./styles.css";

export default function App() {
const outerRef = useRef();
return (
<div className="App">
<div
onBlur={(e) => {
// 失焦后获取焦点的那个元素
const nextFocusDom = e.relatedTarget;
// 判断其是否在父元素内,如果在父元素内就不错处理
if (nextFocusDom && outerRef.current.contains(nextFocusDom)) {
console.log(" [内部导致] 父元素失焦");
} else {
console.log(" [需要处理] [外部导致] 父元素失焦");
}
}}
className="outer"
ref={outerRef}
tabIndex="0"
>
<input className="inner" />
<select className="inner" />
</div>
<input />
</div>
);
}
2021-01-14 10:41:04 +08:00
回复了 ymmagic1234 创建的主题 问与答 json array 如何过滤指定的属性?
let data = [
{
"id": "1234",
"key1": "val1",
"key2": "val2",
"name": "someone",
"age": 39
},
{
"id": "1234",
"key1": "val1",
"key2": "val2",
"name": "someone",
"age": 39
}
]

let result = data.map(item => {
// 过滤出想要保留的 key
const fKeys = Object.keys(item).filter(key => !['name', 'age'].includes(key));
// 不改变原有引用对象数据
let newItem = {};
for (let key of fKeys) {
newItem[key] = item[key];
}
return newItem;
});

指定黑名单就行了,如果是白名单的话用展开操作符可以简化逻辑
你都用 saga 了就还是按照 saga 那套中心化 store 的模式来吧。如果想在组件内使用 hooks,那就在你的页面最外层包一层 conncect 把 dispatch 和 store 传进去(可以爷父子一层一层,也可以创建一个 context 直接隔着传下去),里面的消费组件只要写好 effect 处理好引用变更就好了。
把语言切换的状态做成持久化的,只在加载应用的时候读取一次然后递给应用最外层的 Provider 。
2020-10-13 11:04:26 +08:00
回复了 cl903254852 创建的主题 Node.js nodejs 有没有好用的解决粘包问题的库?
固定长度消息头里写消息体的长度,读取的时候不够就缓存下来不处理,等下一个包拼起来完整了再处理
2020-09-29 09:23:49 +08:00
回复了 QGabriel 创建的主题 React react hooks 问题
按照你的写法:
1 、useEffect 中的代码只会在组件 mount 以后执行一次,不管以后组件状态或者 props 怎么变 useEffect 中的代码只会执行 1 次。(也就是为什么 1 和 2 只会输出一次,而 0 会输出多次)
2 、useState 生成的 setState 的执行是**创建一个新的 state 为下一次 render 使用**。但是 useEffect 这次函数闭包里的 formData 是上一次的 state 也就是{},这一点跟类组件的 this.state 是完全不一样的。类组件的 this.state 保存的是状态对象的一个引用,但是用 useState 生成的 state 是通过闭包保存了执行 useEffect 时 state 的在函数执行上下文中的,也就是旧的 state 引用。每次重新 render 以后都会生成一个新的 state,而不是改变旧 state 的引用里的值。
2020-07-14 16:49:21 +08:00
回复了 luckyrayyy 创建的主题 问与答 有没有很稳的电动升降桌?
升高了都晃
2020-07-13 19:31:42 +08:00
回复了 sirthisman 创建的主题 JavaScript 求求各位大佬,爬虫小白遇到的一个 js 生成 cookie 的难题
这个网站加密比较厉害,建议用模拟浏览器的方式去爬
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4209 人在线   最高记录 6543   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 13ms · UTC 10:14 · PVG 18:14 · LAX 03:14 · JFK 06:14
Developed with CodeLauncher
♥ Do have faith in what you're doing.