hooks写React组件的5个注意细节详解

更新时间：2023年03月13日 11:07:40 作者：forrest酱

这篇文章主要为大家介绍了hooks写React组件的5个需要注意的细节详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

正文

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

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

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

不推荐×

function ClickButton(props){
  const [count, setCount] = useState(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 钩子。

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来处理路由的跳转，我们很经常在组件中写了一个按钮，通过点击按钮的事件来处理路由的跳转，如下代码：

不推荐×

function ClickButton(props){
  const history = useHistory()
  const onClickGo = () => {
    history.push('/where-page')
  }
  return <button onClick={onClickGo}>Go to where</button>
}

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

03.通过useEffect来处理actions

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

不推荐×

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 的成功请求数据。因此我们可以改造一下代码，如下代码：

推荐√

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.单一职责组件

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

不推荐×

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

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

推荐√

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

function Header(props) {
  return (
    &lt;header&gt;
      {isMobile() ? &lt;BurgerButton menuItems={menuItems} /&gt; : &lt;Tabs tabData={menuItems} /&gt;}
    &lt;/header&gt;
  )
}

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(() => {
    updateBreadcrumbs();
  }, [location.pathname]);
  useEffect(()=>{
    fetchData();
  },[])
  return (
    <div>
      <BreadCrumbs />
    </div>
  );
}

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

以上就是hooks写React组件的5个注意细节详解的详细内容，更多关于hooks写React组件的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

React通过classnames库添加类的方法
这篇文章主要介绍了React通过classnames库添加类,在vue中添加class是一件非常简单的事情，你可以通过传入一个对象, 通过布尔值决定是否添加类，本文给大家介绍的非常详细，需要的朋友可以参考下
2022-09-09
React路由的history对象的插件history的使用解读
这篇文章主要介绍了React路由的history对象的插件history的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
React实现组件间通信的几种方式小结
在React应用中,组件间的通信是一个基础而关键的概念,理解和掌握不同组件之间的通信方式,可以帮助我们构建出更加模块化、可维护和可扩展的应用程序,React提供了多种组件通信的方法,本文给大家详细的介绍了这些方法,需要的朋友可以参考下
2024-07-07
使用React实现内容滑动组件效果
这篇文章主要介绍了使用React实现一个内容滑动组件效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-05-05
使用webpack搭建react开发环境的方法
本篇文章主要介绍了使用webpack搭建react开发环境的方法，在这篇文章中我们开始利用我们之前所学搭建一个简易的React开发环境，用以巩固我们之前学习的Webpack知识。一起跟随小编过来看看吧
2018-05-05
React三大属性之Refs的使用详解
这篇文章主要介绍了React三大属性之Refs的使用详解，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
2021-04-04
原生+React实现懒加载(无限滚动)列表方式
这篇文章主要介绍了原生+React实现懒加载(无限滚动)列表方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
react中useState改变值不渲染的解决方式
这篇文章主要介绍了react中useState改变值不渲染的解决方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
react-router-dom入门使用教程(前端路由原理)
这篇文章主要介绍了react-router-dom入门使用教程,主要包括react路由相关理解，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-08-08
React Native 环境搭建的教程
本篇文章主要介绍了React Native 环境搭建的教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08