docs: add useCallback post

Author: luckfunc

docs/.vitepress/config.ts

@@ -75,6 +75,12 @@ function sidebar() {
         { text: '你不知道的console.log', link: '/posts/踩坑日记/你不知道的console.log' },
       ]
     },
+    {
+      text: 'React相关知识学习',
+      items: [
+        { text: 'useCallback', link: '/posts/react相关/useCallback' },
+      ]
+    },
     {
       text: 'Ahooks源码学习',
       items: [

docs/posts/react相关/useCallback.md

@@ -0,0 +1,88 @@
+## useCallback
+
+```tsx
+import { memo, useState } from 'react'
+import './App.css'
+
+const Child = memo(() => {
+  console.log('Child render')
+  return <div>Child</div>
+})
+
+function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <>
+      <button onClick={() => setCount((count) => count + 1)}>{count}</button>
+      <Child />
+    </>
+  )
+}
+
+export default App
+```
+> meno允许我们将组件包裹起来，只要Props不变，就不会重新渲染
+
+- 但是如果我们传递的是一个函数，那么每次父组件更新，都会重新渲染子组件，因为每次父组件更新，都会重新创建一个新的fn函数，这样就会导致子组件重新渲染
+```tsx
+import { memo, useState } from 'react'
+import './App.css'
+
+interface IProps {
+  fn: () => void
+}
+const Child = memo((props: IProps) => {
+  const { fn } = props
+  console.log('Child render', fn)
+  return <div>Child</div>
+})
+
+function App() {
+  const [count, setCount] = useState(0);
+  const fn = () => {
+    console.log('fn')
+  }
+
+  return (
+    <>
+      <button onClick={() => setCount((count) => count + 1)}>{count}</button>
+      <Child fn={fn} />
+    </>
+  )
+}
+
+export default App
+```
+- 这个时候可以使用useCallback来解决这个问题
+
+```tsx
+import { memo, useState, useCallback } from 'react'
+import './App.css'
+
+interface IProps {
+  fn: () => void
+}
+
+const Child = memo((props: IProps) => {
+  const {fn} = props
+  console.log('Child render', fn)
+  return <div>Child</div>
+})
+
+function App() {
+  const [count, setCount] = useState(0);
+  const fn = useCallback(() => {
+    console.log('fn')
+  }, []);
+
+  return (
+    <>
+      <button onClick={() => setCount((count) => count + 1)}>{count}</button>
+      <Child fn={fn}/>
+    </>
+  )
+}
+
+export default App
+```