组件强化
一、类组件继承
对于类组件的强化，首先想到的是继承方式。因为 React 中类组件，有良好的继承属性，所以可以针对一些基础组件，首先实现一部分基础功能，再针对项目要求进行有方向的改造、强化、添加额外功能。
1.1 语法
import React from "react";
import ReactDOM from "react-dom";
class Base extends React.Component {
constructor(props) {
super(props);
this.state = {
type: "Base组件",
};
}
componentDidMount() {
console.log("Base组件");
}
render() {
return (
<div>
Base组件
{this.state.type}
</div>
);
}
}
class App extends Base {
constructor(props) {
super(props);
this.state = {
type: "App组件",
};
}
componentDidMount() {
console.log("App组件");
}
render() {
return (
<div>
{super.render()}
App组件
{this.state.type}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
1.1 特点
-
基类
State(Base): 基类 state 被继承后的组件修改 -
基类生命周期: 基类生命周期被继承后不会被执行