React/practise/31.hook/04.useEffect依赖项.jsx

import { useState, useEffect } from 'react'

// useEffect函数,作用就是为 react 函数组件提供副作用处理的

/* 依赖项控制副作用的执行时机
1.默认状态（无依赖项）：组件初始化的时候先执行一次，等到每次数据修改组件更新再次执行

2.添加一个空数组依赖项，组件初始化的时候执行一次 

3. 依赖特定项：组件初始化的时候执行一次，依赖的特定项发生变化会再次执行

4.注意事项：只要 useEffect 回调函数中用到的数据状态就应该出现在依赖项数组中声明，否侧可能会有 bug

hook 的出现就是在不用生命周期的概念也可以写业务代码
*/


function App() {
    const [count, setCount] = useState(0)     // 0 是 count 的初始值
    const [name, setName] = useState('one')

   /*  useEffect(() => {
        // 定义副作用
        console.log('副作用又执行了')
        document.title = count
    }, [])           */               // 添加一个空数组依赖项 []，组件只在首次渲染时执行一次

    /*  useEffect(() => {
        // 定义副作用
        console.log('副作用又执行了')
        document.title = count
    }, [count])      */                // 添加特定依赖项 [count]

    // 初始化 + count 或 name 被修改时都会执行副作用函数
    useEffect(() => {
        // 定义副作用
        console.log('副作用又执行了')
        document.title = count
        console.log(name)
    }, [count,name])    

    return (
        <div>
            <button onClick={() => setCount(count + 1)}>{count}</button>
            <button onClick={() => setName('cp')}>{name}</button>
        </div>
    )
}

export default App