当前位置：首页 > 文章列表 > 文章 > 前端 > 掌握 React 中的 SOLID 原则：提高代码质量

掌握 React 中的 SOLID 原则：提高代码质量

来源：dev.to 2024-08-24 08:48:50 0浏览收藏

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《掌握 React 中的 SOLID 原则：提高代码质量》，聊聊，希望可以帮助到正在努力赚钱的你。

在开发健壮、可维护和可扩展的 react 应用程序时，应用 solid 原则可以改变游戏规则。这些面向对象的设计原则为编写干净高效的代码提供了坚实的基础，确保您的 react 组件不仅功能强大，而且易于管理和扩展。

在本博客中，我们将深入探讨如何将每个 solid 原则应用到 react 开发中，并提供代码示例来实际说明这些概念。

1.单一职责原则（srp）

定义： 一个类或组件应该只有一个改变的理由，这意味着它应该专注于单一职责。

在 react 中： 每个组件都应该处理特定的功能。这使您的组件更可重用并且更易于调试或更新。

例子：

// userprofile.js
const userprofile = ({ user }) => (
  <div>
    <h1>{user.name}</h1>
    <p>{user.bio}</p>
  </div>
);

// authmanager.js
const authmanager = () => (
  <div>
    {/* authentication logic here */}
    login form
  </div>
);

在此示例中，userprofile 仅负责显示用户配置文件，而 authmanager 则处理身份验证过程。按照 srp 将这些职责分开，使每个组件更易于管理和测试。

2. 开闭原理（ocp）

定义： 软件实体应该对扩展开放，对修改关闭。

在 react 中： 设计可以在不修改现有代码的情况下扩展新功能的组件。这对于维持大规模应用程序的稳定性至关重要。

例子：

// button.js
const button = ({ label, onclick }) => (
  <button onclick={onclick}>{label}</button>
);

// iconbutton.js
const iconbutton = ({ icon, label, onclick }) => (
  <button label={label} onclick={onclick}>
    <span classname="icon">{icon}</span>
  </button>
);

这里，button 组件简单且可复用，而 iconbutton 则是通过添加图标来扩展它，而不改变原来的 button 组件。这通过允许通过新组件进行扩展来遵守 ocp。

3.里氏替换原理（lsp）

定义： 超类的对象应该可以被子类的对象替换，而不影响程序的正确性。

在 react 中： 创建组件时，确保派生组件可以无缝替换其基础组件，而不会破坏应用程序。

例子：

// button.js
const button = ({ label, onclick, classname = '' }) => (
  <button onclick={onclick} classname={`button ${classname}`}>
    {label}
  </button>
);

// primarybutton.js
const primarybutton = ({ label, onclick, ...props }) => (
  <button label={label} onclick={onclick} classname="button-primary" {...props} />
);

// secondarybutton.js
const secondarybutton = ({ label, onclick, ...props }) => (
  <button label={label} onclick={onclick} classname="button-secondary" {...props} />
);

primarybutton 和 secondarybutton 通过添加特定样式来扩展 button 组件，但它们仍然可以与 button 组件互换使用。遵守 lsp 可确保应用程序在替换这些组件时保持一致且无错误。

4. 接口隔离原则（isp）

定义： 不应强迫客户依赖他们不使用的方法。

在 react 中： 为你的组件创建更小、更具体的接口（props），而不是一个大的、单一的接口。这确保组件只接收它们需要的 props。

例子：

// textinput.js
const textinput = ({ label, value, onchange }) => (
  <div>
    <label>{label}</label>
    &lt;input type=&quot;text&quot; value={value} onchange={onchange} /&gt;
  </div>
);

// checkboxinput.js
const checkboxinput = ({ label, checked, onchange }) => (
  <div>
    <label>{label}</label>
    &lt;input type=&quot;checkbox&quot; checked={checked} onchange={onchange} /&gt;
  </div>
);

// userform.js
const userform = ({ user, setuser }) => {
  const handleinputchange = (e) => {
    const { name, value } = e.target;
    setuser((prevuser) => ({ ...prevuser, [name]: value }));
  };

  const handlecheckboxchange = (e) => {
    const { name, checked } = e.target;
    setuser((prevuser) => ({ ...prevuser, [name]: checked }));
  };

  return (
    <>
      <textinput label="name" value={user.name} onchange={handleinputchange} />
      <textinput label="email" value={user.email} onchange={handleinputchange} />
      <checkboxinput label="subscribe" checked={user.subscribe} onchange={handlecheckboxchange} />
    </>
  );
};

在此示例中，textinput 和 checkboxinput 是具有自己的 props 的特定组件，确保 userform 遵循 isp 仅将必要的 props 传递给每个输入。

5. 依赖倒置原则（dip）

定义： 高层模块不应该依赖于低层模块。两者都应该依赖于抽象。

在 react 中： 使用钩子和上下文来管理依赖关系和状态，确保组件不与特定实现紧密耦合。

例子：

第 1 步：定义身份验证服务接口

// authservice.js
class authservice {
  login(email, password) {
    throw new error("method not implemented.");
  }
  logout() {
    throw new error("method not implemented.");
  }
  getcurrentuser() {
    throw new error("method not implemented.");
  }
}
export default authservice;

第 2 步：实施特定的身份验证服务

// firebaseauthservice.js
import authservice from './authservice';

class firebaseauthservice extends authservice {
  login(email, password) {
    console.log(`logging in with firebase using ${email}`);
    // firebase-specific login code here
  }
  logout() {
    console.log("logging out from firebase");
    // firebase-specific logout code here
  }
  getcurrentuser() {
    console.log("getting current user from firebase");
    // firebase-specific code to get current user here
  }
}

export default firebaseauthservice;

// authoservice.js
import authservice from './authservice';

class authoservice extends authservice {
  login(email, password) {
    console.log(`logging in with autho using ${email}`);
    // autho-specific login code here
  }
  logout() {
    console.log("logging out from autho");
    // autho-specific logout code here
  }
  getcurrentuser() {
    console.log("getting current user from autho");
    // autho-specific code to get current user here
  }
}

export default authoservice;

第 3 步：创建身份验证上下文和提供程序

// authcontext.js
import react, { createcontext, usecontext } from 'react';

const authcontext = createcontext();

const authprovider = ({ children, authservice }) => (
  <authcontext.provider value={authservice}>
    {children}
  </authcontext.provider>
);

const useauth = () => usecontext(authcontext);

export { authprovider, useauth };

步骤4：使用登录组件中的auth服务

// login.js
import react, { usestate } from 'react';
import { useauth } from './authcontext';

const login = () => {
  const [email, setemail] = usestate("");
  const [password, setpassword] = usestate("");
  const authservice = useauth();

  const handlelogin = () => {
    authservice.login(email, password);
  };

  return (
    <div>
      <h1>login</h1>
      &lt;input
        type=&quot;email&quot;
        value={email}
        onchange={(e) =&gt; setemail(e.target.value)}
        placeholder="enter email"
      />
      &lt;input
        type=&quot;password&quot;
        value={password}
        onchange={(e) =&gt; setpassword(e.target.value)}
        placeholder="enter password"
      />
      <button onclick={handlelogin}>login</button>
    </div>
  );
};

export default login;

第 5 步：将提供商集成到应用程序中

// App.js
import React from 'react';
import { AuthProvider } from './AuthContext';
import FirebaseAuthService from './FirebaseAuthService';
import Login from './Login';

const authService = new FirebaseAuthService();

const App = () => (
  <AuthProvider authService={authService}>
    <Login />
  </AuthProvider>
);

export default App;

在react中应用dip的好处：

解耦： 高级组件（如 login）与低级实现（如 firebaseauthservice 和 authoservice）解耦。它们依赖于一个抽象（authservice），使代码更灵活且更易于维护。
灵活性： 在不同的身份验证服务之间切换非常简单。您只需要更改传递给 authprovider 的实现，无需修改 login 组件。
可测试性：抽象的使用使得在测试中模拟服务变得更容易，确保

组件可以单独测试。