react中memo使用

React.memo() 和 PureComponent 很相似，它可以帮助我们控制什么时候重新渲染组件。

组件只是在它的 props 发生改变的时候进行重新渲染。一般来讲，组件在props没有改变的时候是不需要进行render的，通过 PureComponent 和 React.memo()，我们可以只让某些组件进行渲染。

import React from 'react';
const  Com = React.memo((props) => {
	return <div>{props.name}</div>
})
export default class App extends React.Component {   
    state={
      name: 'Foo'
    }
    render(){
     return (
        <div>               
	  <button onClick={(e) => this.setState({name: name +'1'})}>
	  　 Click我
          </button>           
          <Com name="name" />          
         </div>
      );   
   }
}

每次input的值发生改变时，虽然name的值发生改变，但是Foo组件只渲染一次，并未重复渲染。
效果为：