跳过 Effect（二）

• 根据依赖数据的变化调用effect

  传递数组作为 useEffect 的第二个可选参数，数组中可以设置要监听发生变化的数据，可以是一个也可以是多个，只要有一个元素发生变化，React 就会执行 effect。

  useEffect(()=>{},[被监听的数据1,被监听的数据2])

  xxxxxxxxxx
  //只要组件需要更新，则下面的effect就会执行，大可不必
  useEffect(() => {
          inputRef.current.value = `点击了${count}次`
  })
  

  xxxxxxxxxx
   useEffect(()=>{
       //在effect中可以获取到最新的count
       inputRef.current.value = `点击了${count}次`
      },[count])//当count发生变化时，才调用effect
  

• 监听props传递的数据的变化

  xxxxxxxxxx
  //CounterParent.js
  import React, { useEffect, useState } from 'react'
  import Counter from './Counter'
  
  export default function CounterParent() {
      const [id, setId] = useState()
      
      return (
          <div>
              <button onClick={()=>setId('100')}>获取Id </button>
              <Counter id={id}/>
          </div>
      )
  }
  
  

  xxxxxxxxxx
  useEffect(()=>{
          console.log(props.id)
          if(props.id){
              //使用id，比如发起网络请求等
          }
  },[props.id])
  

实时效果反馈

1.下列说法错误的是：

A useEffect传递第二个参数为[]，则effect只会执行一次

B useEffect传递第二个参数为[x,y]，则effect只会在x发生变化的时候执行

C useEffect传递第二个参数为[x,y]，则effect会在x或者y发生变化的时候执行

D useEffect不传递第二个参数，则effect会在组件每次渲染的时候被执行

答案

1=>B