React组件设计原则-接口隔离原则（ISP）

接口隔离原则（ISP）

只传递它需要的组件道具

ISP 声明不应强迫人们依赖他们不使用的接口。[11]由于我们缺少 JavaScript 中的接口，因此这是一个不太相关的评论。然而，我们可以读懂这个原则背后的想法，并将其转化为我们可以在 React 代码中使用的东西：只给组件提供它们需要的东西。这意味着实现细节对任何特定的高级功能都无关紧要。

实现细节是完成任务的某种特定方式。例如，“从 API 获取待办事项”是我们可以通过使用 axios 库（实现细节）来完成的任务。另一个任务可能是“将用户存储在数据库中”；我们选择的数据库是这个任务的一个实现细节。[12]

在 React 中说明这一点

在 React 中，我们可以推断这会影响我们的props. 例如：

const DisplayUser = (props) => {
  return (
    <div>
      <h1>Hello, {props.user.name}! </h1>
    </div>
  )
};

这个组件关心什么是什么？它当然不会，它只需要知道用户的名字。如果我们决定重构属性所在的位置，那么这种对实现细节的依赖可能是有害的。例如，当前可能看起来像这样：<DisplayUser />usernameuseruser

const user = {
  name: "josh",
  age: 23,
  hairColor: "blonde",
  heightInCm: 175
};

但是，我们可能希望稍微重构一下，使其看起来像：

const user = {
  personalInfo: {
    name: "josh",
    age: 23
  },
  physicalFeatures: {
    hairColor: "blone",
    heightInC,: 175
  }
};

有了这个，我们就破坏了我们的组件，因为它是未定义的！为了解决这个问题，我们应该只传递给它需要的东西，而不是让它处理名称所在位置的实现细节。<DisplayUser />props.user.name<DisplayUser />

const DisplayUser = ({name}) => {
  return (
    <div>
      <h1>Hello, {name}! </h1>
    </div>
  )
};

const App = () => {
  const user = {
    personalInfo: {
      name: "josh",
      age: 23
    },
    physicalFeatures: {
      hairColor: "blone",
      heightInC,: 175
    }
  }
  return (
    <div>
      <DisplayUser name={user.personalInfo.name} />
    </div>
  )
};

这样，如果我们更改了实现细节，我们需要做的就是传递正确的信息，而无需更改.<DisplayUser />

如果可能的话，解构组件所需的道具。这样，组件不依赖于其父组件中的细节。

接口隔离原则（ISP）

在 React 中说明这一点

相关标签：

发表评论

所有评论(0)