react中的watch监视属性-useEffect

在vue中可以使用watch属性，去监视一个值，当这个值进行变化的时候就去执行一些操作。在react是没有这个属性的，但是它也一样可以达到相同的效果，那么接下来看看它是怎么实现的呢？
在react中实现监听效果有一个比较简单的方法，就是使用useEffect 这个hook，在我们刚接触这个hook时经常会被代入到类组件中的生命周期上，其实它不光有生命周期的功能更是可以实现监听的效果。

1、首先我们先来看下useEffect 用来当作生命周期时是怎么使用的，代码如下：

import React, { useEffect, useState } from 'react'
export default function Wtach() {
  const [num, setNum] = useState(0)
  useEffect(() => {
    console.log('我是初始化的hook')
    return () => {
      console.log('我是卸载的hook')
    }
  }, [])
  useEffect(() => {
    console.log('我是更新的hook')
  })
  return (
    <div>
      <p>{`当前数量是${num}`}</p>
      <button onClick={() => setNum(num + 1)}>增加数量</button>
    </div>
  )
}

上述代码中，第一个useEffect 中传入两个参数第一个参数为一个callback回调函数， 第二个参数传入一个空数组，callback回调函数又返回了一个用于卸载组件时调用的函数。他们的调用时期分别为初始化加载完成页面调用useEffect 传入的第一个函数（此时对应omponentDidMount生命周期钩子），在卸载的时候react会调用第一个callback函数里面返回的函数（此时对应componentWillUnmount生命周期钩子），这样以来他们就完全实现了和生命周期一样的两个功能。打印如下：

再来看第二个useEffect ，它只传入了一个callback回调参数，这个传入的callback就会在每次页面更新完成后进行调用（它对应了componentDidUpdate生命周期钩子）。效果如下：

image.png

2、上面看完了useEffect 实现生命周期的功能，下面就来看下它是怎么实现类似watch属性的。代码如下：

import React, { useEffect, useState } from 'react'

export default function Wtach() {
  const [num, setNum] = useState(0)
  useEffect(() => {
    console.log('我是改变后的num', num)
  }, [num])
  return (
    <div>
      <p>{`当前数量是${num}`}</p>
      <button onClick={() => setNum(num + 1)}>增加数量</button>
    </div>
  )
}

上述代码useEffect 中除了正常传入第一个callback函数，第二个参数传入一个数组里面的值是num，此时传入的callback函数的调用就依赖了第二个参数数组中num的值，每当num的值改变后react就会去调用传入的第一个callback函数，这样就实现了类似watch属性的功能。效果如下：

image.png

最后如果你想要监听多个值，不需要写多个useEffect ，只需要在第二个数组参数中增加新的值即可，如下：