使用React Hook提高代码复用性

前端这点事 82 0

Hook 简介

Hook 是 React 16.8 的新增特性。是对 React 函数组件的一种扩展,通过提供一些特殊的函数,让无状态的组件拥有状态组件才拥有的能力。

没有Hook之前写组件有两种形式,分别为

  • 函数组件
  • class组件

函数组件特点如下

  1. 所有的数据都是依赖props传入的,没有内部state
  2. 没有生命周期
  3. 没有this(组件实例)

实际开发中因为业务复杂,一般使用函数组件无法满足,所以大家默认都是使用class组件进行开发,这是一个不会出错的选择。函数组件大家平时应该都挺少会去用的,因为函数组件能提供的功能比较局限。但是引入Hook后,函数的能力就被扩展了许多,因为函数的特性,非常适合抽象成可复用的组件。

解决哪些问题

不同组件间与状态有关的逻辑复用问题

平时写组件的方式就是通过props传递给下一个组件,有些简单的情况这样也挺好的。但是当项目不断迭代,会发现当组件被多个模块多次引用,还是会多写一些重复的逻辑。因为受到到状态或者生命周期的影响,导致这部分逻辑却又很难拆出来。

引入Hook就可以将受状态或生命周期影响的组件抽出来。

业务发展导致组件日益庞大

最外层的代码集中维护许多state状态,导致页面引入越来越多毫无关联的模块,代码的可读性大大降低,有时候因为多个生命周期里面有大量不相关的逻辑,这样杂乱的代码容易引起bug,也增加了其它开发人员维护的难度。

Hook将组件中每一个相关的小模块拆分成一个函数,这样能够让组件即使庞大结构也是清晰的。

用法

  • State Hook: 在函数组件中使用state
  • Effect Hook: 在函数组件中使用生命周期
  • Custom Hook: 自定义Hook,可以将组件逻辑提取到函数中。(注意:自定义 Hook 是一个函数,其名称以 “use” 开头,函数内部可以调用其他的 Hook)

 

Hook 规则

Hook 本质就是 JavaScript 函数,但是在使用它时需要遵循两条规则

  • 只在最顶层使用 Hook(不要在循环,条件或嵌套函数中调用)
  • 只在 React 函数中调用 Hook

 

ESLint 插件

强制执行 hooks 的最佳实践

eslint-plugin-react-hooks

 

如何使用

详细的一些概念官方文档已经写得很全面了,可以参考:Hook的官方文档

接下来就用一个实际的例子来说明一下State Hook的使用

示例

产品第一版本需求如下:

现在有 小A,小B 两位同学,每位同学都处于未穿鞋的状态,小A穿鞋需要2s,小B穿鞋需要5s,在页面一中用文字描述两位同学的穿鞋状态变更( 如果小A正在穿鞋中,则在页面上显示 '小A正在穿鞋子',如果小A已经穿好了鞋子,则将文字替换为 '小A已经穿好鞋子')

使用class组件实现如下:

src/demo1.js

 import React from "react";
 ​
 class Page extends React.Component {
   state = {
     data: [
       { id: 1, name: "小A", time: "2000" },
       { id: 2, name: "小B", time: "5000" }
     ]
   };
 ​
   start(item) {
     this.setState({
       [item.id]: "穿鞋子"
     });
 ​
     setTimeout(() => {
       this.setState({
         [item.id]: "穿好鞋子"
       });
     }, item.time);
   }
 ​
   componentDidMount() {
     this.state.data.forEach(item => {
       this.start(item);
     });
   }
 ​
   render() {
     return (
       <div>
         {this.state.data.map(item => {
           return (
             <h1 key={item.id}>
               {this.state[item.id] === "穿鞋子"
                 ? `${item.name}正在穿鞋子...`
                 : `${item.name}已经穿好鞋子了`}
             </h1>
           );
         })}
       </div>
     );
   }
 }
 ​
 export default Page;

使用Hook组件实现如下:

自定义hook如下:

src/useHook.js

 import React, { useState } from "react";
 ​
 function useHook(item) {
   const [status, setStatus] = useState("穿鞋子");
 ​
   setTimeout(() => {
     setStatus("穿好鞋子");
   }, item.time);
 ​
   return (
     <h1 key={item.id}>
       {status === "穿鞋子"
         ? `${item.name}正在穿鞋子...`
         : `${item.name}已经穿好鞋子了`}
     </h1>
   );
 }
 ​
 export default useHook;

引用hook的函数组件

src/hookDemo1.js

 import React from "react";
 import useHook from "./useHook";
 ​
 function Page() {
   const data = [
     { id: 1, name: "小A", time: "2000" },
     { id: 2, name: "小B", time: "5000" }
   ];
   return (
     <div>
       {data.map(item => {
         return useHook(item);
       })}
     </div>
   );
 }
 ​
 export default Page;

 

好了,实现完上面的需求,现在觉得hook的好处并没有什么体现,接下来产品又发布了第二版需求,要求我们在另一个页面显示另外两位同学的状态。需求如下:

现在有 小C,小D 两位同学,每位同学都处于未穿鞋的状态,小A穿鞋需要4s,小B穿鞋需要8s,在页面二中用文字描述两位同学的穿鞋状态变更( 如果小A正在穿鞋中,则在页面上显示 '小C正在穿鞋子',如果小C已经穿好了鞋子,则将文字替换为 '小C已经穿好鞋子')

接下来再第一个版本的基础上来实现第二个需求

使用class组件实现如下:

src/demo2.js

 import React from "react";
 ​
 class Page extends React.Component {
   state = {
     data: [
       { id: 1, name: "小C", time: "4000" },
       { id: 2, name: "小D", time: "8000" }
     ]
   };
 ​
   start(item) {
     this.setState({
       [item.id]: "穿鞋子"
     });
 ​
     setTimeout(() => {
       this.setState({
         [item.id]: "穿好鞋子"
       });
     }, item.time);
   }
 ​
   componentDidMount() {
     this.state.data.forEach(item => {
       this.start(item);
     });
   }
 ​
   render() {
     return (
       <div style={{ color: "lightblue" }}>
         {this.state.data.map(item => {
           return (
             <h1 key={item.id}>
               {this.state[item.id] === "穿鞋子"
                 ? `${item.name}正在穿鞋子...`
                 : `${item.name}已经穿好鞋子了`}
             </h1>
           );
         })}
       </div>
     );
   }
 }
 ​
 export default Page;

 

使用Hook组件实现如下:

src/hookDemo2.js

 import React from "react";
 import useHook from "./useHook";
 ​
 function Page() {
   const data = [
     { id: 1, name: "小C", time: "4000" },
     { id: 2, name: "小D", time: "8000" }
   ];
   return (
     <div style={{ color: "lightblue" }}>
       {data.map(item => {
         return useHook(item);
       })}
     </div>
   );
 }
 ​
 export default Page;

 

第二次的代码明显比第一次少了许多,而且如果之后产品如果增加了一个状态,那明显使用Hook实现的方式可以更快的适应需求的变更,代码的维护性也变高了许多。

看完代码应该就能很好的理解hook的使用了吧.

标签: React

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~