React 设计模式 0x7：构建可伸缩的应用程序

Cellinlab

发布于 2023-05-17 21:08:33

1.3K0

发布于 2023-05-17 21:08:33

文章被收录于专栏：Cellinlab's Blog

学习如何轻松构建可伸缩的 React 应用程序：构建可伸缩的应用程序

# 条件渲染

在构建 React 应用程序时，总会有一些情况，您不希望重新渲染组件，除非某些 prop 或值发生了更改，或者达到了某些条件；这称为条件渲染。

下面是在 React 中进行条件渲染的几种方法：

三元运算符（Ternary operation）

{
  condition ? <ComponentA /> : <ComponentB />;
}

与逻辑运算符 &&（AND logical operation）

{
  condition && <ComponentA />;
}

if-else 语句（If else operation）

if (condition) {
  return <ComponentA />;
} else {
  return <ComponentB />;
}

# Memoization

Memoization 是一种在编程中防止不必要的重新计算操作的方法。它有助于使应用程序更快，它在内存中缓存计算结果，并在需要时显示结果，而不是每次都重新计算。在 React 中，有两种主要的方式来实现记忆化，它们分别是：

useMemo

import React, { useMemo } from "react";

const Component = ({ propA, propB }) => {
  const memoizedValue = useMemo(() => {
    // 这里的代码只会在 propA 或 propB 发生变化时执行
    return computeExpensiveValue(propA, propB);
  }, [propA, propB]);

  return <div>{memoizedValue}</div>;
};

useCallback

import React, { useCallback } from "react";

const Component = ({ propA, propB }) => {
  const memoizedCallback = useCallback(() => {
    return computeExpensiveValue(propA, propB);
  }, [propA, propB]);

  return <div onClick={memoizedCallback}>Click me</div>;
};

# TypeScript

TypeScript 是 JavaScript 的一个超集。由于 TypeScript 是强类型的，因此有助于构建可扩展的应用程序。

要创建 React TypeScript 应用程序，我们使用以下命令：

npx create-react-app myapp –-template typescript

# vite
npm init @vitejs/app myapp --template react-ts

这里，myapp 是我们应用程序的名称，在命名应用程序时禁止使用任何大写字母。

TypeScript 具有一些优点，可以使您的应用程序具有可扩展性，包括以下内容：

其强类型特性可以减少错误
数据类型容易定义

# 文件组织

React 灵活度很高，支持你用自己喜欢的方式组织代码，但如果您想实现一个好的应用程序，最好遵循一些最佳实践，更好为应用程序命名和组织文件和文件夹。

下面是一些建议的方式：

pages
- 与页面名称相同，您需要将所有页面放在此文件夹中
components
- 与组件名称相同，您需要将所有组件放在此文件夹中
- 该文件夹将包含您的 JSX 文件、CSS 文件和 types（如果使用 TypeScript）
assets
- 存放媒体文件，如图像、某些 CSS（如果需要）、视频等
helpers / utils
- 放置常用的可重复使用函数
- 这些函数在应用程序中需要时进行调用
constants
- 放置不会更改的内容
api
- 放置 API 调用及其函数
hooks
- 放置自定义钩子

# 关注点分离

在软件开发中，关注点分离是将应用程序构建为不同的模块，每个模块只做一件事情或解决一个问题。这将使您的应用程序更加健壮和可扩展。

因此，假设我们有一个应用程序，其中有两个组件，即登录（Login）和注册（Register），以及一个调用 API 的组件。我们希望将这两个组件彼此分离，使它们可以独立工作，并完成它们创建的任务，即通过调用 API 登录和注册用户。

因此，我们可以将这些组件放在不同的文件夹中，如下所示：

src
├── components
│   ├── Login
│   │   ├── Login.js
│   │   ├── Login.css
│   │   └── Login.test.js
│   └── Register
│       ├── Register.js
│       ├── Register.css
│       └── Register.test.js
└── api
    ├── api.js
    └── api.test.js

# 高阶组件

高阶组件是一个函数，它接受一个组件并返回一个新组件。

import React from "react";

const withHOC = (WrappedComponent) => {
  const HOC = (props) => {
    return <WrappedComponent {...props} />;
  };

  return HOC;
};

export default withHOC;

使用：

import React from "react";

import withHOC from "./withHOC";

const Component = (props) => {
  return <div>{props.name}</div>;
};

export default withHOC(Component);

# SOLID 原则

SOLID 原则是由 Robert Martin 于 2000 年编写的面向对象设计原则。

SOLID 代表以下内容：

单一职责原则（SRP）
开闭原则（OCP）
里氏替换原则（LSP）
接口隔离原则（ISP）
依赖反转原则（DIP）

这些原则是为对象设计而设计的，但它们也可以用于其他语言，例如 JavaScript。

让我们看看如何在 React.js 中使用 SOLID 原则：

单一职责原则（SRP）

意味着每个组件应该只做一件事
在设计 React 应用程序时，请记住这个原则，因为它将使您的代码更易读和可维护

开闭原则（OCP）

这个原则表示您的代码应该是可扩展的，而不必打破或重写一个模块
这样可以在不重新设计应用程序的情况下添加功能

里氏替换原则（LSP）

每个子类都应该是其基类的替代品
如果我们有一个名为 Make 的类，它扩展到另一个名为 Car 的类，我们应该能够扩展类 Make 而不影响 Car 类的功能
在使用类组件或在 React 中使用 TypeScript 时是可能用到

接口隔离原则（ISP）

应该仅使用所需的接口
在 React 中，这可以说是 props
- props 在每个 React 应用程序中非常重要，当将这些 props 从父组件传递到子组件时，只应传递所需的内容，而不是所有 props 中的内容
- 可以通过在传递之前解构 props 来实现这一点

依赖反转原则（DIP）

这个原则表示我们应该隐藏代码实现，只通过抽象与它们交互

import React, { useState } from "react";

function Display({ value }) {
  return <div>{value}</div>;
}

function Button({ handleClick }) {
  return <button onClick={handleClick}>Click me</button>;
}

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <Display value={count} />
      <Button handleClick={handleClick} />
    </div>
  );
}

export default App;

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023/2/9，如有侵权请联系 cloudcommunity@tencent.com 删除

react