2.6 纯函数如何处理副作用useEffect基本使用

一、纯函数的概念

1. 只负责自己的任务，不会更改在改函数调用前就已经存在的对象或变量

2. 输入相同，则输出相同。给定相同的输入，纯函数应总是返回相同的结果

二、副作用的概念

1. 函数在执行过程中对外部造成的影响称之为副作用，例如：Ajax调用，DOM操作，与外部系统同步等

2. 在React组件中，事件操作是可以处理副作用的，但有时候需要初始化处理副作用，那么就需要useEffect钩子

三、useEffect基本使用

1. 可以在初始化的时候进行副作用操作

2. 触发时机：JSX渲染后触发

   import { useEffect, useRef } from 'react'
   
   function App() {
     const ref = useRef()
   
     // 副作用：不符合纯函数操作行为
     // setTimeout(() => {
     //   ref.current.focus()
     // }, 3000)
   
     // 副作用：复合纯函数的规范因为时间是可以处理副作用的
     const handeClick = () => {
       // ref.current.focus()
     }
   
     // 可以在初始的时候进行副作用操作
     // 触发的时机：Jsx渲染后触发的
     useEffect(() => {
       ref.current.focus()
     })
   
     return (
       <>
         <div>Default Template</div>
         <button onClick={handeClick}>点击</button>
         <input type="text" ref={ref} />
       </>
     )
   }
   
   export default App
   

3. 初始渲染和更新渲染，都会触发useEffect()，因为每次渲染JSX后，都会触发useEffect()，整个当前函数组件作用域的最后时机触发的

   import { useEffect, useState } from 'react'
   
   function App() {
     const [count, setCount] = useState(0)
   
     useEffect(() => {
       console.log(count)
     })
   
     const handeClick = () => {
       setCount(count + 1)
     }
   
     return (
       <>
         <div>Default Template</div>
         <button onClick={handeClick}>点击</button>
         <br />
         {count}
       </>
     )
   }
   
   export default App