react hooks常见的坑

useEffect 包含了哪几个生命周期？

• componentDidMount、componentDidUpdate 、 componentWillUnmount

useEffect 在生命时候执行？

• useEffect会在第一次渲染之后和每次更新渲染之后都会执行,并且在DOM渲染结束之后执行

useEffect 死循环？

• 说明useEffect在传入第二个参数时一定注意：第二个参数不能为引用类型，会造成死循环，比如 []===[] 为false，所以会造成useEffect会一直不停的渲染，因此把data的初始值改为undefined，就可以

函数作为依赖的时候死循环？

• 提到组件外面，或者用useCallback包一层。useMemo 可以做类似的事情以避免重复生成对象。

子组件:

useEffect(() => {
  props.onChange(props.id)
}, [props.onChange, props.id])

父组件的onChange需要useCallback包一层:

const onChange = useCallback(() => {
   ...
  }, [])

useEffect 里面拿不到最新的props和state？

• 使用refs

function Example() {
  const [count, setCount] = useState(0);
  const latestCount = useRef(count);

  useEffect(() => {
    // Set the mutable latest value
    latestCount.current = count;
    setTimeout(() => {
      // Read the mutable latest value
      console.log(`You clicked ${latestCount.current} times`);
    }, 3000);
  });