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

Question

做和做有什么区别

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

和

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

?

Answer 1

使用 useMemo()没有依赖项数组将计算 value在 every render .

If no array is provided, a new value will be computed on every render.

这将相当于

const value = ...

使用 useMemo()使用空依赖数组将计算 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'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>