useEffect的两个参数

情况一：

useEffect需要传递两个参数，第一个参数是逻辑处理函数，第二个参数是一个数组

useEffect(() => {
/** 执行逻辑 */
},[])

情况二：

• 第二个参数存放变量，当数组存放变量发生改变时，第一个参数，逻辑处理函数将会被执行
• 第二个参数可以不传，不会报错，但浏览器会无限循环执行逻辑处理函数。
  代码如下：

  useEffect(() => {
  /** 执行逻辑 */
  })
  

情况三：

• 第二个参数如果只传一个空数组，逻辑处理函数里面的逻辑只会在组件挂载时执行一次 ，等价于 componentDidMount
  代码如下：

  useEffect(() => {
  /** 执行逻辑 */
  },[])
  

情况四：

• 第二个参数如果不为空数组,依赖指定参数触发使用
• 逻辑处理函数会在组件挂载时执行一次和(a或者b变量在栈中的值发生改变时执行一次) 这是不是相当于componentDidMount 和componentDidUpdate 的结合

const [a, setA] = useState(1);
const [b, setB] = useState(2);
useEffect(() => {
/** 执行逻辑 */
},[a,b])

特殊情况处理

useEffect监测不到依赖数组元素的变化。

只有一种可能，依赖数组元素的地址的值根本就没变，
原因：因为changeA没有真正的改变a在栈中的值（地址的值），只是改变了a在堆中的值。
useEffect监测不到堆中值得变化，所有引用类型数据都应该注意这一点。

const [a, setA] = useState({
b: 'dx',
c: '18',
})

const changeA = () => {
	setA((old) => {
	old.b = 'yx'
	return old
	})
}

useEffect(() => {
/** 当组件挂载时执行一次changeA */
changeA ()
},[])

/**当changeA执行却没有打印 a*/
useEffect(() => {
/** 执行逻辑 */
console.log(a)
},[a])

解决的办法 

const [a, setA] = useState({
b: 'dx',
c: '18',
})

const changeA = () => {
	setA((old) => {
	const newA = {...old}
	newA .b = 'yx'
	return newA 
	})
}

useEffect(() => {
/** 当组件挂载时执行一次changeA */
changeA ()
},[])

/**当changeA执行打印  {b:'yx',c:'18'}  */
useEffect(() => {
/** 执行逻辑 */
console.log(a)
},[a])