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

2023-05-17 21:08:33 浏览数 (1)

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

# 条件渲染

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

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

三元运算符（Ternary operation）

代码语言：javascript复制
{
  condition ? <ComponentA /> : <ComponentB />;
}

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

代码语言：javascript复制
{
  condition && <ComponentA />;
}

if-else 语句（If else operation）

代码语言：javascript复制
if (condition) {
  return <ComponentA />;
} else {
  return <ComponentB />;
}

# Memoization

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

useMemo

代码语言：javascript复制
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

代码语言：javascript复制
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 应用程序，我们使用以下命令：

代码语言：javascript复制
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 登录和注册用户。

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

代码语言：javascript复制
src
├── components
│   ├── Login
│   │   ├── Login.js
│   │   ├── Login.css
│   │   └── Login.test.js
│   └── Register
│       ├── Register.js
│       ├── Register.css
│       └── Register.test.js
└── api
    ├── api.js
    └── api.test.js

# 高阶组件

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

代码语言：javascript复制
import React from "react";

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

  return HOC;
};

export default withHOC;

使用：

代码语言：javascript复制
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）

  • 这个原则表示我们应该隐藏代码实现，只通过抽象与它们交互
代码语言：javascript复制
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;
react 渲染 函数 设计 设计模式

0 人点赞