useEffect

useEffect(setup, dependencies?)

参数

• setup：一个函数，可选择性return一个 cleanup 函数。在每次dependencies对比结果为false，React 将首先使用旧值运行 cleanup 函数（如果你提供了该函数），然后使用新值运行 setup 函数。在组件从 DOM 中移除后，React 将最后一次运行 cleanup 函数。
• 可选dependencies：是一个数组[dep1, dep2, dep3]，React 将使用 Object.is 来比较每个依赖项和它先前的值。需要注意的是dependencies的长度和顺序不能改变。

用法

请求数据

import { useState, useEffect } from 'react';
import { fetchBio } from './api.js';

export default function Page() {
  const [person, setPerson] = useState('Alice');
  const [bio, setBio] = useState(null);

  useEffect(() => {
    let ignore = false;
    setBio(null);
    fetchBio(person).then(result => {
      if (!ignore) {
        setBio(result);
      }
    });
    return () => {
      ignore = true;
    };
  }, [person]);
  
  // ...

获取DOM

const domRef = useRef(null);

useEffect(() => {
	// 在组件挂载后，myRef.current 将会是对应的 DOM 元素
	console.log(domRef.current);
}, []);

return (
	<div ref={domRef}/>
);

注意事项

• useEffect 只在客户端上运行，在服务端渲染中不会运行。
• useEffect 是一个 Hook，因此只能在 组件的顶层 或自己的 Hook 中调用它，而不能在循环或者条件内部调用。如果需要，抽离出一个新组件并将 state 移入其中。

React Hooks 模拟生命周期

componentDidMount：组件挂载后（插入 DOM 树中）立即调用

useEffect(() => {
	// 这里写 componentDidMount 中的逻辑
}, []);

componentWillUnmount：组件卸载及销毁之前调用

useEffect(() => {
	return () => {
		// 这里写 componentWillUnmount 中的逻辑
	};
}, []); 

推荐使用：useUnmount

componentDidUpdate：在组建更新后会被立即调用。

	const [prevProps, setPrevProps] = useState(props);
	useEffect(() => {
    	// 例如根据前后props的差异进行相应处理
		if (prevProps.someValue !== props.someValue) {
			// 执行相应操作
		}
    // 更新prevProps为当前props，供下次渲染使用
	setPrevProps(props);
  }, [props]);