react-第八章-usecallback

useCallback

用于性能优化，缓存函数的，避免重复创建。 usestate等会造成组件重新渲染。

需要注意的是，不能滥用，会占用内存。

组件会去判断函数的内存地址是否发生变化，发生后就会重新执行。 用Callback函数包裹后，内存地址就不会发生改变，也就不会重新渲染

usecallback和useMemo的区别

相同：

入参和依赖项都一样

不同：

 使用场景：useMemo主要是适合用于有大量复杂的计算后返回的值
         usecallback适合返回一个函数
         
 总结：简单来说就是一个返回的是值一个返回的是函数。

import React, { useCallback, useState } from 'react'
const Child = React.memo(({ user, callback }: { user: { name: string; age: number }, callback: () => void }) => {
   console.log('Render Child')
   const styles = {
      color: 'red',
      fontSize: '20px',
   }
   return <div style={styles}>
      <div>{user.name}</div>
      <div>{user.age}</div>
      <button onClick={callback}>callback</button>
   </div>
})

const App: React.FC = () => {
   const [search, setSearch] = useState('')
   const [user, setUser] = useState({
      name: 'John',
      age: 20
   })
   const childCallback = () => {
      console.log('callback 执行了')
   }
   return <>
      <input type="text" value={search} onChange={e => setSearch(e.target.value)} />
      <Child callback={childCallback} user={user} />
   </>;
};

export default App;