You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.7 KiB
50 lines
1.7 KiB
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
|