React的5种高级模式

本文概述了5种现代高级React模式,包括集成代码、优点和缺点,以及在公共库中的具体用法。

像每个React开发者一样,你可能已经问过自己以下问题之一

  • 我如何建立一个可重复使用的组件以适应不同的使用情况?
  • 我如何建立一个具有简单API的组件,使其易于使用?
  • 我如何建立一个在用户界面和功能方面可扩展的组件?

这些反复出现的问题催生了整个React社区的一些高级模式的出现

在这篇文章中,我们将看到5种不同模式的概述。为了便于比较,我们将对所有这些模式使用一个相同的结构。

我们将从一个小的介绍开始,然后是一个真实的代码例子(基于同一个简单的Counter组件)。

在这里插入图片描述

我们将列出优点和缺点,然后在一个名为 "标准"的部分中定义两个因素。

  • 反转控制: 你的组件给用户提供的灵活性和控制等级
  • 实施的复杂性: 你和用户实现该模式的难度。

最后,我们将找一些公共库在生产环境中使用该模式的例子

在这篇文章中,我们将考虑一个React开发者(你)为其他开发者构建一个组件的情况。因此,"用户"这个角色直接指的是这些开发者(而不是使用你的网站/应用程序的最终用户)。

1. 复合组件模式(Compound Components Pattern)

这种模式允许创建富有表现力和声明性的组件,避免非必要的prop drilling。如果你想让你的组件更有可塑性,有更好的关注点分离和易理解的API,你应该考虑使用这种模式。

例子

import React from "react";
import { Counter } from "./Counter";

function Usage() {
  const handleChangeCounter = (count) => {
    console.log("count", count);
  };

  return (
    <Counter onChange={handleChangeCounter}>
      <Counter.Decrement icon="minus" />
      <Counter.Label>Counter</Counter.Label>
      <Counter.Count max={10} />
      <Counter.Increment icon="plus" />
    </Counter>
  );
}

export { Usage };

优点

  • 减少了API的复杂性:与其把所有的props都塞进一个巨大的父组件中,然后再把这些props钻到子UI组件中,不如在这里把每个props都连接到各自最有意义的子组件上。

在这里插入图片描述

  • 灵活的标记结构:你的组件有很大的UI灵活性,允许从一个单一的组件创建各种情况。例如,用户可以改变子组件的顺序或定义哪个组件应该被显示。

在这里插入图片描述

  • 关注点分离:大部分的逻辑都包含在主Counter组件中,然后用React.Context来分享所有子组件的状态和事件处理。我们得到了一个明确的责任划分。

在这里插入图片描述

缺点

  • 太高的UI灵活性:拥有灵活性的同时,也有可能引发意想不到的行为(把一个不需要的组件的子组件放进去,把子组件的顺序弄乱,忘记包含一个必须的子组件)

    根据你想要用户如何使用你的组件,你可能不希望有那么多的灵活性。

在这里插入图片描述

  • 更重的JSX:应用这种模式会增加JSX行的数量,特别是当你使用像ESLint这样的代码检测工具或类似Prettier这样的代码格式化工具时
    在单个组件的规模上,这似乎不是什么大问题,但当你从全局来看时,肯定会产生巨大的差异。

在这里插入图片描述

标准

  • 反转控制:1/4
  • 实施的复杂性:1/4

使用此模式的公共库

  • React Bootstrap
  • Reach UI

2. 受控属性模式

这种模式将你的组件转变为一个受控组件。外部状态作为 "单一事实源 "被消耗,允许用户插入自定义逻辑,修改默认组件的行为。

例子

import React, { useState } from "react";
import { Counter } from "./Counter";

function Usage() {
  const [count, setCount] = useState(0);

  const handleChangeCounter = (newCount) => {
    setCount(newCount);
  };
  return (
    <Counter value={count} onChange={handleChangeCounter}>
      <Counter.Decrement icon={"minus"} />
      <Counter.Label>Counter</Counter.Label>
      <Counter.Count max={10} />
      <Counter.Increment icon={"plus"} />
    </Counter>
  );
}

export { Usage };

优点

  • 给予更多的控制:由于主状态暴露在你的组件之外,用户可以控制它,因此可以直接影响你的组件。

在这里插入图片描述

缺点

  • 实施的复杂性: 之前,在一个地方(JSX)的一个集成就足以使你的组件工作。现在,它将分散在3个不同的地方(JSX / useState / handleChange)。
    在这里插入图片描述

    参考React实战视频讲解:进入学习

标准

  • 反转控制:2/4
  • 实施的复杂性:1/4</
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值