个人中心
gpt4 book ai didi

使用hooks写React组件需要注意的5个地方

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章使用hooks写React组件需要注意的5个地方由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

Hook是React16.8开始新增的特性。虽然React官方文档已经作出了针对React hooks的相关概念的讲解，但是光看官方文档是很难将hooks使用好的，在编写hooks的过程中很容易跳进陷阱和错误。本文总结了5个不好的地方.

01.不需要render的场景下使用useState

在函数组件中我们可以使用useState来管理状态，这使得对状态的管理变得很简单，但是也容易被滥用，我们通过下面的代码样例看下容易忽略的地方.

不推荐× 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function ClickButton(props){
  const [count, setCount] = setState(0)
  const onClickCount = () => {
   setCount((c) => c + 1)
  }
  const onClickRequest = () => {
   apiCall(count)
  }
 
  return (
   <div>
    <button onClick={onClickCount}>Click</button>
    <button onClick={onClickRequest}>Submit</button>
   </div>
  )
}

问题所在：仔细看上面的代码，乍一看其实也没什么问题，点击按钮更新 count。但是问题也就出在这里，我们的 return 部分并没有用到 count 状态，而每次 setCount 都会使组件重新渲染一次，而这个渲染并不是我们需要的，多出来的渲染会使得页面的性能变差，因此我们可以改造一下代码，如下代码:

推荐√ 如果我们只是单纯的想要一个能在组件声明周期内保存的变量，但是变量的更新不需要组件的重新渲染，我们可以使用 useRef 钩子.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function ClickButton(props){
  const count = useRef(0)
  const onClickCount = () => {
   count.current++
  }
  const onClickRequest = () => {
   apiCall(count.current)
  }
 
  return (
   <div>
    <button onClick={onClickCount}>Click</button>
    <button onClick={onClickRequest}>Submit</button>
   </div>
  )
}

02.使用了router.push而非link

在React SPA应用中，我们用react-router来处理路由的跳转，我们很经常在组件中写了一个按钮，通过点击按钮的事件来处理路由的跳转，如下代码:

不推荐× 。

?
1
2
3
4
5
6
7
function ClickButton(props){
  const history = useHistory()
  const onClickGo = () => {
   history.push( '/where-page' )
  }
  return <button onClick={onClickGo}>Go to where</button>
}

问题所在：尽管上述代码可以正常工作，但是却不符合Accessibility（易访问性设计）的要求，此类按钮并不会被屏幕阅读器当作一个可以跳转的链接。因此我们可以改造一下代码，如下代码:

推荐√ 。

?
1
2
3
4
5
function ClickButton(props){
  return <Link to= "/next-page" >
   <span>Go to where</span>
  </Link>
}

03.通过useEffect来处理actions

有时候，我们只想在 React 更新 DOM 之后运行一些额外的代码。比如发送网络请求，手动变更 DOM，记录日志.

不推荐× 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function DataList({ onSuccess }) {
  const [loading, setLoading] = useState( false );
  const [error, setError] = useState( null );
  const [data, setData] = useState( null );
 
  const fetchData = () => {
   setLoading( true );
   callApi()
    .then((res) => setData(res))
    . catch ((err) => setError(err))
    .finally(() => setLoading( false ));
  };
 
  useEffect(() => {
   fetchData();
  }, []);
 
  useEffect(() => {
   if (!loading && !error && data) {
    onSuccess();
   }
  }, [loading, error, data, onSuccess]);
 
  return <div>Data: {data}</div>;
}

问题所在：上面的代码使用了两个useEffect ，第一个用来请求异步数据，第二个用来调用回调函数。在第一个异步请求数据成功，才会触发第二个 useEffect 的执行，但是，我们并不能完全保证，第二个 useEffect 的依赖项完全受控于第一个 useEffect 的成功请求数据。因此我们可以改造一下代码，如下代码:

推荐√ 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function DataList({ onSuccess }) {
  const [loading, setLoading] = useState( false );
  const [error, setError] = useState( null );
  const [data, setData] = useState( null );
 
  const fetchData = () => {
   setLoading( true );
   callApi()
    .then((res) => {
     setData(res)
     onSuccess()
     })
    . catch ((err) => setError(err))
    .finally(() => setLoading( false ));
  };
 
  useEffect(() => {
   fetchData();
  }, []);
  return <div>Data: {data}</div>;
}

04.单一职责组件

什么时候该把一个组件分成几个更小的组件？如何构建组件树？在使用基于组件的框架时，所有这些问题每天都会出现。然而，设计组件时的一个常见错误是将两个用例组合成一个组件.

不推荐× 。

?
1
2
3
4
5
6
7
8
9
10
11
function Header({ menuItems }) {
  return (
   <header>
    <HeaderInner menuItems={menuItems} />
   </header>
  );
}
 
function HeaderInner({ menuItems }) {
  return isMobile() ? <BurgerButton menuItems={menuItems} /> : <Tabs tabData={menuItems} />;
}

问题所在：上面的代码通过这种方法，组件HeaderInner试图同时成为两个不同的东西，一次做不止一件事情并不是很理想。此外，它还使得在其他地方测试或重用组件变得更加困难。因此我们可以改造一下代码，如下代码:

推荐√ 。

将条件提升一级，可以更容易地看到组件的用途，并且它们只有一个职责，即<Tabs/>或<BurgerButton/>，而不是试图同时成为两个不同的东西.

?
1
2
3
4
5
6
7
function Header(props) {
  return (
   <header>
    {isMobile() ? <BurgerButton menuItems={menuItems} /> : <Tabs tabData={menuItems} />}
   </header>
  )
}

05.单一职责useEffects

通过对比componentWillReceiveProps或componentDidUpdate方法，才认识到userEffect的美丽。但是没有妥当使用useEffect也是容易出问题的.

不推荐× 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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中分离出来.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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组件的资料请关注我其它相关文章！ 。

原文链接：https://juejin.cn/post/6947573426076778533 。

最后此篇关于使用hooks写React组件需要注意的5个地方的文章就讲到这里了,如果你想了解更多关于使用hooks写React组件需要注意的5个地方的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： 简单分析React中的EffectList
文章推荐： Angular框架详解之视图抽象定义
文章推荐： React+Antd 实现可增删改表格的示例
文章推荐： 前端组件化基础知识详细讲解
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com