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 方式来解决你的问题，根据你上面的描述这种方式完全可以满足你的需求。

MDN 上关于 relatedTarget 的解释： https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget

不同事件的 relatedTarget 不太一样

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>
);
}

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 。

固定长度消息头里写消息体的长度，读取的时候不够就缓存下来不处理，等下一个包拼起来完整了再处理

按照你的写法：
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 的引用里的值。

升高了都晃