React Hooks ---useMemo

useMemo

下面咱们经过一个实例，来理解下 useMemo的用法。

• 父组件

function App() {
  const [name, setName] = useState('名称')
  const [content,setContent] = useState('内容')
  return (
      <>
        <button onClick={() => setName(new Date().getTime())}>name</button>
        <button onClick={() => setContent(new Date().getTime())}>content</button>
        <Button name={name}>{content}</Button>
      </>
  )
}

• 子组件

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

  const otherName =  changeName(name)
  return (
      <>
        <div>{otherName}</div>
        <div>{children}</div>
      </>

  )
}

熟悉react的同窗能够很显然的看出，当咱们点击父组件的按钮的时候，子组件的name和children都会发生变化。

注意咱们打印console.log的方法。

无论咱们是改变name或者content的值，咱们发现 changeName的方法都会被调用。
是否是意味着 咱们原本只想修改content的值，可是因为name并无发生变化，因此无需执行对应的changeName方法。可是发现他却执行了。 这是否是就意味着性能的损耗，作了无用功。

下面咱们使用useMemo进行优化

• 优化以后的子组件

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

const otherName =  useMemo(()=>changeName(name),[name])
  return (
      <>
        <div>{otherName}</div>
        <div>{children}</div>
      </>

  )
}

export default Button

这个时候咱们点击 改变content值的按钮，发现changeName 并无被调用。
可是点击改变name值按钮的时候，changeName被调用了。
因此咱们能够使用useMemo方法 避免无用方法的调用，固然通常咱们changName里面可能会使用useState来改变state的值，那是否是就避免了组件的二次渲染。
达到了优化性能的目的