12react之useMemo和memo

useMemo: 第一个参数是函数，第二个参数是监听的值是否变化，如果变化才会执行useMemo里面的函数，//类似于计算属性computed

memo : 和PureComponent一样的功能，只是mome用在函数组件中（只有当state里面的值变化了才会执行render函数）(高阶函数的写法)

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 =  useMemo(()=>changeName(name),[name]);//useMemo,第一个参数是函数，第二个参数是监听的值是否变化，如果变化才会执行useMemo里面的函数
    return (
        <>
          <div>{otherName}</div>
          <div>{children}</div>
        </>
  
    )
  }
  
  export default Button

上面的代码，正常情况下父组件的两个按钮点击都会触发子组件的方法changeName调用，但是子组件中有个otherName变量，只想让父组件中name改变才去改变子组件的dom，所以用到useMemo，useMemo的第二个参数就是监听数据的变化的时候才会执行第一个参数的调用，这样就会得到：只有当name变化的时候才会执行changeName的方法。