分析了一下，不太对劲，不应该输出两次。在 codesandbox 里调试一下，确实只输出了一次。你的 React 版本是 18 并且用上了 Strict Mode 吗（我也没用过，不太确定）？

可以试试 Edge 商店里的 Sc 翻译 里的 Google 网页翻译。虽然面对新元素的插入也是一样不能直接翻译，需要手动关闭后再启用，但起码能用。

可以把数据拆分成几个 reducer(slice) 放进 Redux 里，把 state 下沉到子组件。

> button1 和 button2 的用法，还有区别么？
没有区别。因为一旦渲染你写在外面和 onClick 里面都一样是动态生成的函数。
不过差别也有，就是非匿名函数和匿名函数的区别（也就是没什么区别）。

> 不过，当 handleClick 比较复杂时，应该可以通过 useCallback 提高性能
如果函数不影响重渲染的情况下用不用没有区别，甚至用了还会降低效率（依赖的比较）。因为就算你用了 useCallback，在重渲染的那一刻依然会生成一个函数，只是依赖没有变所以没有替换（以我理解）。

> 跟踪一下，触发了多少次 render ？
在组件里 console.log('Render'); 就可以了。

这个问题主要是 URL.createObjectURL(video) 这一段。

触发 re-render 后，React 会重新计算所有的值，包括 src={URL.createObjectURL(video)} 这一段。所以每当 re-render 后都会看上去停止了，实际上是因为 src 被重新计算了。

解法可以像你 3L 说的那样，也可以在不改动原来代码的基础上用 useMemo 。

```
const objURL = useMemo(() => {
return video ? URL.createObjectURL(video) : undefined
}, [video])

...

src={objURL}
```

自己实现一个就可以了。

> 现在我希望这个 panel 可以用鼠标拖动到屏幕 /页面中的任何位置
用 position: fixed; 加上 left 和 top 就能解决。

> 只有 header 那个“部分”（红色框）能够响应鼠标的拖动
给 header 绑定 onMouseDown 事件，一旦 mousedown 触发了就开始监听 window.onmousemove 和 window.onmouseup 。在 mousemove 里计算当前位置（{ left, top }）并返回。监听 window.onmouseup 触发后可视作取消拖动的事件，取消监听 onmousemove 和 onmouseup，发送拖动完毕的信号。

叠 buff 的来了（仅供娱乐）

const data =[{"province":"上海市","city":"上海市市辖区","adcode":"310118","district":"青浦区"},
{"province":"江苏","city":"苏州市","adcode":"320506","district":"吴中区"},
{"province":"山西省","city":"阳泉市","adcode":"140302","district":"城区"},
{"province":"上海市","city":"上海市市辖区","adcode":"310101","district":"黄浦区"},
{"province":"河北省","city":"石家庄市","adcode":"130123","district":"正定县"}];

var obj = Object.keys(obj = data.reduce((t, c) => ({ ...t, [c.province]: { ...t[c.province], [c.city]: { ...t[c.province]?.[c.city], [c.district]: c.adcode } } }), {})).map((v) => ({ name: v, children: Object.keys(obj[v]).map((v1) => ({name: v1, children: Object.keys(obj[v][v1]).map((v2) => ({ name: v2, value: obj[v][v1][v2]})) })) }));

console.log(obj);

我看你好像是需要根据 data 变化后执行 post，所以你可以试试这样做。用 useRef 来储存第一次获得的 data，在第二个 useEffect 进行 ref 和 data 是否相等判断。

代码：
const dataRef = useRef();
const handleSetData = (data) => {
setData(data);
dataRef.current = data;
}
useEffect(() => {
const fn = async () => {
const res = await axios.get(xxx);
handleSetData(res);
};
fn();
}, []);
useEffect(() => {
if (dataRef.current === data) { return; }
axios.post(xxx); // 如果 xxx 里涉及到 setData，用 handleSetData 代替
}, [data])

你没把 add 函数放进 DependencyList 里，不放进去的话永远调用最开始拿到的 add 函数。
最开始的 add 函数输出的永远是最开始的 progress 。

可以试试清除缓存，昨天我也发现在 edge 上可以看番剧而一直在用的 chrome 却不行。打开 F12 发现只有 chrome 报语法错误。后来就知道了是因为在 edge 上我没有使用过 B 站所以也就没有缓存过，在 chrome 上报错的那个文件是来自缓存的，也就是说 B 站在修复后并没有更改文件名称。我在清除了缓存之后就恢复正常了。