useEffect副作用函数-基本使用

副作用：函数式组件的主要工作就是渲染页面，只要不是渲染ui的行为，都是副作用

使用步骤

不写第二个参数

 组件挂载时，执行一次     组件每次更新时，都会执行一次，每更新组件一次这个useEffect都会执行

// 1. 导入useEffect
import { useEffect } from 'react'

// 2. 使用useEffect
useEffect(() => {
	console.log('useEffect 1 执行了,可以做副作用')
})

// eslint-disable-next-line no-use-before-define
import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom'
console.log(useEffect)
export default function App () {
  const [num, setNum] = useState(5)
  console.log(setNum)
  document.title = '标题' + num
  useEffect(() => {
    // setNum(num + 5)
    document.title = '标题' + num
  })
  const hClick = () => {
    setNum(num + 5)
    // useEffect(() => {
    //   // setNum(num + 5)
    //   document.title = '标题' + num
    // })
    // 错误×
    // Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
    // 1. You might have mismatching versions of React and the renderer (such as React DOM)
    // 2. You might be breaking the Rules of Hooks
    // 3. You might have more than one copy of React in the same app
    // See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
  }
  return (<div>
      num:{num}
      <button type="button" onClick={() => {
        // eslint-disable-next-line no-unused-expressions
        hClick()
      }}>每次加5</button>
    </div>)
}
ReactDOM.render(<App />, document.getElementById('root'))

第二个参数为空数组 

执行时机:只执行一次

useEffect的依赖项

useEffect有两个参数：

参数1： 副作用函数。

参数2：执行副作用函数的依赖项：它决定了什么时机执行参数1（副作用函数）

执行时机：初始执行一次，每次依赖项更新都会执行一次