随机出现的，当出现的时候“元素”栏会是空的，一般是切换到其他栏后关闭再开启，不行的话刷新网页再重复上述操作，确实难受。

以前用 jQ 真的“一直”都简洁吗，如果要更新一个 DIV 你是直接 query 它还是在初始化后记录用 var 记录呢。然后随着代码增多，交互增多，记录的越来越多，变量也越来越多，不会觉得很乱吗。更何况还是用的像 var 这种，后面维护起来简直头疼，refactor 都难。综合以上这些点你真的觉得 jQ 更好吗。而且随着 ES 的更新，大多数 jQ 的特性都自带了，使用了 Babel 后更是能让你比较无痛地在旧浏览器使用新特性。然后就是 React 一直推的都是 think like React ，你用 jQ 的思路来做 React 还不如直接用 jQ 。

无线的能效挺低的。就像无线充电相对于有线充电要浪费多约 1/3 的电（手机）。

分析了一下，不太对劲，不应该输出两次。在 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 站在修复后并没有更改文件名称。我在清除了缓存之后就恢复正常了。