React - useMemo 没有依赖项数组与空数组

Question

做和做有什么区别

const value = useMemo(() => {
     ...
});

和

const value = useMemo(() => {
     ...
}, []);

？

Answer 1

使用不带依赖项的数组将在每次渲染useMemo()时计算。value

如果未提供数组，则每次渲染时都会计算一个新值。

这将相当于

const value = ...

useMemo()与空依赖项数组一起使用将value仅在安装时计算一次。

演示：

const value = ...

const App = () => {
    const value1 = React.useMemo(() => {
      console.log('calculating value1');
    });
    const value2 = React.useMemo(() => {
      console.log('calculating value2');
    }, []);
    const [counter, setCounter] = React.useState(0);
    return (
      <button onClick={() => setCounter(counter + 1)}>{counter}</button>
    );
};

ReactDOM.render(<App />, document.querySelector('.react'));