React 中功能组件的早期回报

Question

使用钩子在功能组件中提前返回是否是一种很好的做法。

例如

const dummyComponent =({name}) => {
if(!name){
return;
}
useEffect(()=>{ console.log("name changed");},[name])

const handler =(event)=>{
console.log("handler called");
}
return(
<div onClick={handler}> Click Me!!!</div>
)}
}

上面的代码将导致 useeffect 调用流程发生变化。 最初，如果名称在父级中定义并传递给子级，它将执行，但如果名称在父级中更改并变得未定义，则使用效果的流程会发生变化。

这是早日回归的好习惯吗？

Answer 1

首先，你必须从组件中返回某种JSX。在这种情况下，早期返回对您没有多大帮助，因为只有当名称 prop 更改时才会调用钩子。您现在定义示例的方式可能是内存泄漏的原因。更优选的方法是像这样进行条件渲染

{name ? <div onClick={handler}> Click Me!!!</div> : <div />}