开闭原则 (OCP)
从许多较小的组件中制造出较大的组件
紧接着 SRP，OCP 解释说我们应该使我们的代码可扩展；我们应该能够添加新功能而不必重写部分代码库。[7]在 React 术语中，这可以归结为使用组合而不是继承来创建大型组件。
对我们来说幸运的是，React 鼓励这种做法。这意味着您可能已经在不知不觉中在前端遵循了这一原则。
“在 Facebook，我们在数以千计的组件中使用 React，我们还没有发现任何我们建议创建组件继承层次结构的用例。道具和组合为您提供了以显式方式自定义组件外观和行为所需的所有灵活性。和安全的方式。” - React 文档，2020 [8]
这几乎意味着我们应该始终从较小的组件构建大型组件，使用 props 和特殊属性，例如在需要时构建复杂性。到目前为止，我还没有在任何 React 代码中看到这一点，但是请不要这样做：props.children
// Bad!
class InputBox extends React.Component {
constructor(props){
super(props);
this.state = {input: ""};
this.handleChange = this.handleChange.bind(this);
};
handleChange(e){
this.setState({})
}
render(){
return (
<div>
<h1>Enter your name: </h1>
<input value={this.state.input} onChange={this.handleChange} />
</div>
)
}
}
class FancyInputBox extends InputBox {
render(){
return (
<div>
<h1 style={{color: "red"}}>Enter your name: </h1>
<input value={this.state.input} onChange={this.handleChange} />
</div>
)
}
}在这里，我们继承了用于在. 这很糟糕，因为我们现在与我们的组件紧密耦合。任何更改都可能对所有组件产生不可预见的后果（我们的组件因扩展而关闭）。<InputBox /><FancyInputBox /><FancyInputBox /><InputBox /><InputBox /><FancyInputBox />
“紧耦合”意味着一个组件严重依赖另一个组件，这样一个组件的任何更改都可能破坏另一个组件。这违背了代码模块化的理念，因此我们通常希望尽可能避免这种情况。
一个React示例
如果你想做这样的事情，从更小的组件构建会更好：
// Better!!!
const InputBox = ({stylesForH1, h1Message}) => {
const [input, setInput] = useState("");
return (
<>
<h1 style={stylesForH1}>{h1Message}</h1>
<input value={input} onChange={(e) => setInput(e.target.value)} />
</>
)
};
const FancyInputBox = () => {
return (
<div>
<InputBox stylesForH1={{color: "red"}} h1Message={"Enter your name: "} />
</div>
)
};在这里，我们制作了一个泛型，它接受样式和来自. 然后我们可以通过渲染我们的泛型并传入所需的样式来制作一个组件。这是我们如何从较小的组件组成组件的示例，使用 props 赋予更多可定制性，而不是直接从组件继承。这允许我们根据需要修改和扩展，因为我们知道我们不会影响其中的任何代码（我们的组件是开放扩展的）。<InputBox />props<FancyInputBox /><InputBox />props<InputBox /><FancyInputBox />
使用组合来制作大型组件，而不是从其他组件扩展。
发表评论
所有评论(0)