useMemo优化React Hooks程序性能，解决子组件重复执行问题

作用：

useMemo主要用来解决使用React hooks产生的无用渲染的性能问题。

缘由：

　　使用function的形式来声明组件，失去了shouldCompnentUpdate（在组件更新之前）这个生命周期，主要进行状态对比，如果需要则进行改变。
也就是说使用Hooks的useEffect（替代生命周期）后我们没有办法通过组件更新前条件来决定组件是否更新。
　　而且在函数组件中，也不再区分mount和update两个状态，这意味着函数组件的每一次调用都会执行内部的所有逻辑，就带来了非常大的性能损耗，例如子组件里有异步请求，那每次执行都会
请求一次。

方案：

useMemo和useCallback都是解决上述性能问题的，本节先介绍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的值，那是不是就避免了组件的二次渲染，达到了优化性能的目的。

 

 

 

 

 

.