第21节——useEffect

一、概念

useEffect 可以让你在函数组件中执行副作用操作,接收两个参数，第一个参数是要执行的函数 callback，第二个参数是可选的依赖项数组 dependencies。其中依赖项是可选的，如果不指定，那么 callback 就会在每次函数组件执行完后都执行；如果指定了，那么只有依赖项中的值发生变化的时候，它才会执行。 简单来说就是当我们的依赖项发生发生变化的时候，可以异步的执行里面的回调。

注意

useEffect是在render之后执行

二、使用useEffect监听state的变化

import React, { useState, useEffect } from 'react';
export default function hook() {

  const [num, setNum] = useState(1)

  /**
   * 第一个参数是回调函数
   * 第二个参数是依赖项
   * 每次num变化时都会变化
   * 
   * 注意初始化的时候，也会调用一次
   */
  useEffect(() => {
    console.log("每次num，改变我才会触发")
  }, [num])


  return (
    

       setNum(num + 1)}>+1
      
你好，react hook{num}
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

三、useEffect第二个参数不传

import React, { useState, useEffect } from 'react';
export default function hook() {

  const [num, setNum] = useState(1)


  useEffect(() => {
    console.log("每次render页面我就会触发")
  })

  return (
    

       setNum(num + 1)}>+1
      
你好，react hook{num}
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

四、监听卸载

import React, { useState, useEffect } from 'react';
export default function hook() {

  const [num, setNum] = useState(1)

  /**
   * 第一个参数是回调函数
   * 第二个参数是依赖项
   * 每次num变化时都会变化
   * 
   * 注意初始化的时候，也会调用一次
   */
  useEffect(() => {
    console.log("每次num，改变我才会触发")
    
    return () => {
      /**
       * 这是卸载的回调可以执行某些操作
       * 如果不想执行，则可以什么都不写
       */
      console.log("卸载当前监听")
    }
  }, [num])

  useEffect(() => {
    console.log("每次render页面我就会触发")
    return () => {
      console.log("卸载当前监听")
    }
  })

  return (
    

       setNum(num + 1)}>+1
      
你好，react hook{num}
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38