使用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组件的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章: