2.8 尽量在useEffect内定义函数

一、尽量在useEffect内定义函数

1. 函数也可能成为计算变量，也可以作为依赖项

   import { useCallback, useEffect, useState } from 'react'
   
   function App() {
     const [count] = useState(0)
   
     // 需要使用useCallback来包裹
     const foo = useCallback(() => {
       console.log(count)
     }, [count])
   
     useEffect(() => {
       foo()
     }, [foo])
   
     return (
       <>
         <div>Default Template</div>
       </>
     )
   }
   
   export default App
   

2. 虽然可以一用以来项加useCallback来解决，但是非常不方便，最好的解决方案就是把函数定义在useEffect内部

   import { useEffect, useState } from 'react'
   
   function App() {
     const [count] = useState(0)
   
     useEffect(() => {
       const foo = () => {
         console.log(count)
       }
       foo()
     }, [count])
   
     return (
       <>
         <div>Default Template</div>
       </>
     )
   }
   
   export default App