reactjs - React hooks useEffect() 清理仅用于 componentWillUnmount？

Question

让我解释一下这段代码的结果，以便轻松询问我的问题。

const ForExample = () => {
    const [name, setName] = useState('');
    const [username, setUsername] = useState('');

    useEffect(() => {
        console.log('effect');
        console.log({
            name,
            username
        });

        return () => {
            console.log('cleaned up');
            console.log({
                name,
                username
            });
        };
    }, [username]);

    const handleName = e => {
        const { value } = e.target;

        setName(value);
    };

    const handleUsername = e => {
        const { value } = e.target;

        setUsername(value);
    };

    return (
        <div>
            <div>
                <input value={name} onChange={handleName} />
                <input value={username} onChange={handleUsername} />
            </div>
            <div>
                <div>
                    <span>{name}</span>
                </div>
                <div>
                    <span>{username}</span>
                </div>
            </div>
        </div>
    );
};

安装 ForExample 组件 时，将记录“effect”。这与 componentDidMount() 有关。

每当我更改名称输入时，“效果”和“清理”都会被记录。反之亦然，自从我将 [username] 添加到 useEffect() 的第二个参数以来，每当我更改用户名输入时，都不会记录任何消息。这与 componentDidUpdate()

有关

最后，当 ForExample 组件 卸载时，将记录“cleaned up”。这与 componentWillUnmount() 有关。

我们都知道。

总而言之，每当组件重新渲染(包括卸载)时都会调用“cleaned up”

如果我想让这个组件仅在卸载时记录“已清理”，我只需将 useEffect() 的第二个参数更改为 [] .

但是如果我将[username]更改为[]，ForExample组件将不再实现componentDidUpdate() 用于名称输入。

我想要做的是，让组件同时支持 componentDidUpdate() 仅用于名称输入和 componentWillUnmount()。 (仅在卸载组件时记录“已清理”)

Answer 1

您可以使用多个 useEffect()。

例如，如果我的变量是 data1，我可以在我的组件中使用所有这些:

useEffect( () => console.log("mount"), [] );
useEffect( () => console.log("data1 update"), [ data1 ] );
useEffect( () => console.log("any update") );
useEffect( () => () => console.log("data1 update or unmount"), [ data1 ] );
useEffect( () => () => console.log("unmount"), [] );