React.js 和继承
介绍
代码可重用性是任何基于组件的库或框架中的一个重要方面。React 为代码可重用性提供了组合和继承。继承用于耦合组件及其属性，从而允许应用程序在组件之间实现代码共享。
本指南概述了如何实现继承并查看组合模型的使用情况。
什么是继承？
当某些对象具有相同数量的属性，且这些属性可在整个应用中共享时，继承是实现代码可重用性的一种方法。继承允许应用在父子组件之间进行耦合，并在其子组件中重用状态值和函数等属性。
除了从react包扩展的初始组件类之外，React 不使用继承。
在 React 中实现继承
继承使用关键字extends允许任何组件使用与父组件相连的另一个组件的属性和方法。使用extends关键字，您可以允许当前组件访问组件的所有属性（包括函数），并从子组件触发它。
此示例创建一个名为ParentClass.jsx的组件。
import React from "react";
class ParentClass extends React.Component {
constructor(props) {
super(props);
this.callMe = this.callMe.bind(this);
}
// ParentClass function
callMe() {
console.log("This is a method from parent class");
}
render() {
return false;
}
}
ParentClass将组件从 React 扩展为React.component，这意味着新创建的组件本身正在使用继承。创建父类/组件后，创建一个子组件Example.jsx。
export default class Example extends ParentClass {
constructor() {
super();
}
render() {
this.callMe();
return false;
}
}
Example类扩展了ParentClass ，因此子类将访问在父组件内创建的所有属性和方法。
render() {
this.callMe();
return false;
}
这里在子类中，this.callMe()函数被调用的是父类实现的部分，因此可以通过在子组件中实现继承来访问父组件的属性及其方法。
在 React 中使用 Composition
根据 React 官方文档：
React 具有强大的组合模型，我们建议使用组合而不是继承来重用组件之间的代码
与继承相比，组合模型更加健壮且耦合度更低，因为它可以继承但不直接扩展类。
组合模型使用父子关系，将状态、道具和函数作为道具的值传递给子组件。子组件可以访问或触发彼此的任何更改。例如，您有两个组件ParentComponent和ChildComponent，父组件的属性在子组件中使用。
现在创建一个名为ParentComponent.jsx的文件。
import React from "react";
import ChildComponent from "./ChildComponent";
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
message: "This is a message from parent class"
};
}
render() {
return (
<div>
<ChildComponent message={this.state.message} />
</div>
);
}
}
export default ParentComponent;
从父组件中， this.state.message值被传递给子组件，而无需扩展任何组件。
创建一个名为ChildComponent.jsx的文件。
import React from "react";
class ChildComponent extends React.Component {
render() {
const { message } = this.props;
return (
<div>
<p>
Message from Parent component : <b>{message}</b>
</p>
</div>
);
}
}
export default ChildComponent;
子组件无需扩展ParentComponent即可访问父组件的名为message的属性。
同样的，任何功能也可以由子组件触发。
clickMe() {
console.log("Action triggered from child component");
}
并将其传递给子组件。
render() {
return (
<div>
<ChildComponent message={this.state.message} clickMe={this.clickMe} />
</div>
);
}
该函数作为子组件的 prop 进行访问，也可以按如下所示触发。
import React from "react";
class ChildComponent extends React.Component {
render() {
const { message } = this.props;
return (
<div>
<p>
Message from Parent component : <b>{message}</b>
</p>
<button onClick={this.props.clickMe}>Click Me</button>
</div>
);
}
}
export default ChildComponent;
函数clickMe()由按钮点击事件触发，父组件会处理该事件。
<button onClick={this.props.clickMe}>Click Me</button>
组合模型可以限制代码过度使用并解耦组件，而继承则无法做到这一点，因为它需要按顺序使用所有组件。它可能导致代码过度使用或在任何给定时间点分解。
结论
React 使用继承来将类初始化为组件。除此之外，建议实现组件继承链是没有意义的。
相反，组合模型用于管理 props 和函数通信并保持代码可重用性。您始终可以使用组合模式来避免共享逻辑行为。
如果您有任何疑问，请随时在Codealphabet上提问。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
扫一扫，分享到微信
