React第十天 - Hooks之 useEffect

useEffect

• 让 函数式组件 可以有 生命周期 ,包含组件加载、组件更新、组件写在的三个生命周期方法的结合
• 默认情况下，useEffect 会在第一次渲染之后和每次更新之前都会执行；useEffect每一次（不管是第一次或更新）完都会去执行
• 副作用：
  • 函数副作用，当调用函数的时候，除了返回值外，还对调用函数产生附加的影响
  • 更改组件中的 DOM 都属于副作用
  • 有些副作用需要去清除，需要返回一个函数，比如挂载时设置的定时器，卸载的时候取消定时器

[1, 2, 3].pop() // 每次执行 pop函数的时候，愿数组第一个都会减少一个元素，改变了愿数组其实就是一种副作用

• 可传两个参数
  • arg0:回调函数
  • arg1: 数组（控制哪个方法执行一次或每次执行）
    • 数组传入的依赖项，只有数组中的状态发生改变了才会再次触发 useEffect 执行
    • 如果传入多个，多个中任意一个被改变，useEffect 就会被触发执行

const [ age, setAge ] = useState(18);
const [ money, setMoney ] = useState(1000);

useEffect(() => {
  console.log("page 被执行了")
}, []) // 只有在第一次渲染才执行，每个方法都执行一次

useEffect(() => {
  console.log("page 被执行了")
}, [ age ]) // age 依赖的方法更新才会触发执行

useEffect(() => {
  console.log("page 被执行了")
}, [ age, money ]) // age money 中的任意一个更新了就会触发执行