利用hooks写React组件需要留意的5个处所(2)

function Header(props) { return ( <header> {isMobile() ? <BurgerButton menuItems={menuItems} /> : <Tabs tabData={menuItems} />} </header> ) }

05.单一职责useEffects

通过比拟componentWillReceiveProps或componentDidUpdate要领，才认识到userEffect的瑰丽。可是没有妥当利用useEffect也是容易出问题的。

不推荐×

function Example(props) { const location = useLocation(); const fetchData = () => { /* Calling the api */ }; const updateBreadcrumbs = () => { /* Updating the breadcrumbs*/ }; useEffect(() => { fetchData(); updateBreadcrumbs(); }, [location.pathname]); return ( <div> <BreadCrumbs /> </div> ); }

问题地址：上面的useEffect同时触发了两个副浸染，可是并不都是我们需要的副浸染，因此我们可以改革一下代码，如下代码：

推荐√

将两个副浸染从一个useEffect中疏散出来。

function Example(props) { const location = useLocation(); const fetchData = () => { /* Calling the api */ }; const updateBreadcrumbs = () => { /* Updating the breadcrumbs*/ }; useEffect(() => { fetchData(); updateBreadcrumbs(); }, [location.pathname]); return ( <div> <BreadCrumbs /> </div> ); }

参考：

Five common mistakes writing react components (with hooks) in 2020

以上就是利用hooks写React组件需要留意的5个处所的具体内容，更多关于hooks写React组件的资料请存眷剧本之家其它相关文章！

您大概感乐趣的文章: