请教一个，有关 react 的 re-render 的性能小问题

有关 react 的两个小问题。

import "./styles.css"; import React, { useState } from "react"; export default function App() { const [num, setNum] = useState(0); const handleClick = () => { setNum(num + 1); }; return ( <React.Fragment> <span>{num}</span> <button className="button1" OnClick={handleClick}> Click Me </button> <button className="button2" OnClick={() => setNum(num + 1)}> Click Me Again </button> <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> </React.Fragment> ); } 

我忘记在哪里看到的（年纪大了，记性不太好），在以前 class component 的时代，不推荐 button2 的写法，就是把函数体直接赋值给 button's onClick 。因为这样会使得每次 button2 都有变化，会 re-render 。在大的项目 /组件多的情况下，会有性能问题。一般是建议在 class 里面定义一个函数，然后赋值给 button's click.

现在来到 function component 时代，当 button 被点击的时候，会触发 function app 被重新调用，handleClick 也会被重新生成，这个时候，button1 和 button2 的用法，还有区别么？不过，当 handleClick 比较复杂时，应该可以通过 useCallback 提高性能。虽然 const handleClick 是一个新的变量，但函数体被记忆 /缓存了。

const handleClick = useCallback(() => { ... }); 

另，我还“隐约”记得，button1 的写法，当用户点击 button 时，会触发“两”次 render，我不记得为什么了？是我记错了么？

最后，有没有什么 debug 方法，能够知道，比如，我点击 button1 后，跟踪一下，触发了多少次 render ？

谢谢！