掌握React中的S.O.L.I.D原则:简单示例和最佳实践

掌握React中的S.O.L.I.D原则:简单示例和最佳实践

大家好,我是梦兽。2024年相信大家已经对React不在陌生,今天梦兽想给大家从软件工程角度S.O.L.I.D原则出发,希望大家以后写组件编码是有一些思路。

S:单一职责原则(SRP)

一个组件应该只有一个改变的理由,这意味着它应该只有一项工作。 示例:用户配置文件组件

  • 将职责分解为更小的功能组件。
jsx 复制代码
// UserProfile.js
const UserProfile = ({ user }) => {
  return (
    <div>
      <UserAvatar user={user} />
      <UserInfo user={user} />
    </div>
  );
};

// UserAvatar.js
const UserAvatar = ({ user }) => {
  return <img src={user.avatarUrl} alt={`${user.name}'s avatar`} />;
};

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

这个是有时间的前提下建议遵循的原则,但是一般开发中。我们都会写出下列这样的代码:将显示、数据获取和业务逻辑组合在一个组件中。

jsx 复制代码
// IncorrectUserProfile.js
const IncorrectUserProfile = ({ user }) => {
  // Fetching data, handling business logic and displaying all in one
  const handleEdit = () => {
    console.log("Edit user");
  };

  return (
    <div>
      <img src={user.avatarUrl} alt={`${user.name}'s avatar`} />
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
      <button onClick={handleEdit}>Edit User</button>
    </div>
  );
};

O: 开闭原则(OCP)

软件实体应该对扩展开放,但对修改关闭。示例:主题按钮,使用 props 来扩展组件功能,而无需修改原始组件。

jsx 复制代码
// Button.js
const Button = ({ onClick, children, style }) => {
  return (
    <button onClick={onClick} style={style}>
      {children}
    </button>
  );
};

// Usage
const PrimaryButton = (props) => {
  const primaryStyle = { backgroundColor: 'blue', color: 'white' };
  return <Button {...props} style={primaryStyle} />;
};

不推荐的做法

jsx 复制代码
// IncorrectButton.js
// Modifying the original Button component directly for a specific style
const Button = ({ onClick, children, primary }) => {
  const style = primary ? { backgroundColor: 'blue', color: 'white' } : null;
  return (
    <button onClick={onClick} style={style}>
      {children}
    </button>
  );
};

L: 里氏替换原理

超类的对象可以用其子类的对象替换,而不会破坏应用程序。示例:基本按钮和图标按钮,确保子类组件可以无缝替换超类组件。

jsx 复制代码
// BasicButton.js
const BasicButton = ({ onClick, children }) => {
  return <button onClick={onClick}>{children}</button>;
};

// IconButton.js
const IconButton = ({ onClick, icon, children }) => {
  return (
    <button onClick={onClick}>
      <img src={icon} alt="icon" />
      {children}
    </button>
  );
};

在上面的单一原则遵循的前提下,并不提倡下面这种写法。但也要看你的时间是否足够多。 不推荐写法

javascript 复制代码
// IncorrectIconButton.js
// This button expects an icon and does not handle the absence of one, breaking when used as a BasicButton
const IncorrectIconButton = ({ onClick, icon }) => {
  if (!icon) {
    throw new Error("Icon is required");
  }
  return (
    <button onClick={onClick}>
      <img src={icon} alt="icon" />
    </button>
  );
};

接口隔离原则(ISP)

任何客户端都不应该被迫依赖它不使用的方法。示例:文本组件,针对不同的用途提供特定的接口。

jsx 复制代码
// Text.js
const Text = ({ type, children }) => {
  switch (type) {
    case 'header':
      return <h1>{children}</h1>;
    case 'title':
      return <h2>{children}</h2>;
    default:
      return <p>{children}</p>;
  }
};

不推荐:用不必要的属性使组件变得混乱。

jsx 复制代码
// IncorrectText.js
// This component expects multiple unrelated props, cluttering the interface
const IncorrectText = ({ type, children, onClick, isLoggedIn }) => {
  if (isLoggedIn && onClick) {
    return <a href="#" onClick={onClick}>{children}</a>;
  }
  return type === 'header' ? <h1>{children}</h1> : <p>{children}</p>;
};

依赖倒置原理(DIP)

高层模块不应该依赖于低层模块。两者都应该依赖于抽象。示例:获取数据,使用钩子或类似的模式来抽象数据获取。

jsx 复制代码
// useUserData.js (Abstraction)
const useUserData = (userId) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchData(userId).then(setUser);
  }, [userId]);

  return user;
};

// UserProfile.js
const UserProfile = ({ userId }) => {
  const user = useUserData(userId);

  if (!user) return <p>Loading...</p>;
  return <div><h1>{user.name}</h1></div>;
};

不推荐:在组件内部硬编码数据获取。

jsx 复制代码
// IncorrectUserProfile.js
const IncorrectUserProfile = ({ userId }) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // Fetching data directly inside the component
    fetch(`https://api.example.com/users/${userId}`)
      .then(response => response.json())
      .then(setUser);
  }, [userId]);

  if (!user) return <p>Loading...</p>;
  return <div><h1>{user.name}</h1></div>;
};

类似这种功能,ahooks已经帮我实现了很多,可以按需寻找一下hooks给自己的应用解耦。

如果对你有帮助,能否给我一个小心心或者关注呢?如果想加入梦兽编程交流群可以关注梦兽编程公众号获取二维码。

相关推荐
PandaCave7 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟9 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾30 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧39 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
gqkmiss2 小时前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools