在我们的代码库中,我们喜欢对useEffect
之类的钩子使用工厂函数,因为它使我们可以更轻松地测试效果。我敢肯定,这在过去react-hooks/exhaustive-deps上能很好地工作,但是现在-似乎不再通过工厂函数来跟踪依赖项:
const effect = (name: string) => () => {
console.log("hello", name);
};
function App() {
const [name, setName] = React.useState("alice");
// this one isn't caught
React.useEffect(effect(name), []);
// this one is
React.useEffect(() => {
console.log("hello", name);
}, []);
return (
<div className="App">
{name}
<button
onClick={() =>
setName((oldName) => (oldName === "alice" ? "bob" : "alice"))
}
>
toggle
</button>
</div>
);
}
这是一个codeandbox链接:https://codesandbox.io/s/blissful-varahamihira-qwz8m?file=/src/App.js:200-350
有什么好的替代方法仍然可以让我们以隔离的方式测试effect
的代码?