只对组件进行react hooks useEffect（）清理willunmount？

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>
    );
};

如果我想让这个组件只在卸载时保持日志“清理”，我只需要将useEffect()的第二个参数更改为[]。

但是，如果将[username]更改为[]，Example Component不再实现名称输入的ComponentDidUpdate()。

我想做的是，使组件只支持componentdidupdate()名称输入和componentwillunmount()。（仅在卸载组件时，日志记录“已清除”）

Answer 1

可以使用多个useEffect

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

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