useMemo为什么会打印两次？

Question

useMemo为什么会打印两次？

zanetti

352815

发布于
2020-06-11

问题描述

我正在学习 useMemo，但是发现 useMemo 执行了两次，会打印两次11，无论初始化时，还是改变 name 时。我在 useMemo 里打印 name，发现打印的是两个相同的值。

问题出现的环境背景及自己尝试过哪些方法

我用了 ts，index.tsx 中即使我把其它组件都注释掉，只留下 DemoMemo，也会打印两次。

相关代码

DemoMemo.tsx

import React, {useState} from 'react';
import Button from './Button';

function DemoMemo(){
  const [name, setName] = useState(0);
  const [content, setContent] = useState(100);
  
  return (
    <>
      <h2>useMemo</h2>
      <button onClick={() => {
        setName(new Date().getTime());
      }}>name</button>
      <button onClick={() => {
        setContent(new Date().getTime());
      }}>content</button>
      <Button name={name}>{content}</Button>
    </>
  );
}

export default DemoMemo;

Button.tsx

import React, {useMemo} from 'react';

function Button({name, children}){
  function changeName(name){
    console.log(11);
    return `${name} 改变name的方法`;
  }

  // let otherName = changeName(name);

  let otherName: string = useMemo(() => {
    console.log(name);
    return changeName(name);
  }, [name]);

  return (
    <>
      <div>{otherName}</div>
      <div>{children}</div>
    </>
  );
}

export default Button;

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Counter from './Counter';
import UseReducer from './UseReducer';
import LazilyInit from './LazilyInit';
import DemoMemo from './DemoMemo';
import Callback from './Callback';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
    <Counter />
    <UseReducer />
    <LazilyInit initialCount={5} />
    <DemoMemo />
    <Callback />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();