让我简单解释一下这段代码的结果,以便更容易地说明我的问题。
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()
相关。
每当我更改名称输入时,都会记录“effect”和“cleaned up”。反之亦然,在我将[username]
添加到useEffect()
的第二个参数后,更改用户名输入时不会记录任何消息。这与componentDidUpdate()
相关。
最后,当ForExample组件
卸载时,将记录“cleaned up”。这与componentWillUnmount()
相关。
我们都知道这一点。
总之,“cleaned up”在重新呈现组件(包括卸载)时被调用。
如果我想使此组件仅在卸载时记录“cleaned up”,只需将useEffect()
的第二个参数更改为[]
。
但是如果我将[username]
更改为[]
,则ForExample组件
不再实现名称输入的componentDidUpdate()
。
我的目标是使该组件支持名称输入的componentDidUpdate()
以及componentWillUnmount()
(仅在组件被卸载时记录“cleaned up”)。
username
作为第二个参数的数组,另一个是给出一个空数组作为第二个参数。 - Tholle