http://www.css88.com/react/do.
after reading the documents on the official website, you probably know how the high-level components are encapsulated. Probably know how to encapsulate high-level components.
how do the current requirements obtain the state? of WrappedPage
(we are a mixed developer and need to update header and the icon in the upper right corner! You want to deal with header and upper-right functions in a uniform place; instead of adding duplicate code on every page.)
//basic
import React from "react";
import PropTypes from "prop-types";
//modules
import up from "../modules/cup";
//WrappedPage jsx
export default function mixinsPage(WrappedPage) {
//
return class Page extends React.Component {
constructor(props) {
super(props);
}
componentWillMount() {
console.log(WrappedPage);
//
up.plugins.setRightButton();
}
componentDidMount() {
console.log(`created=>${this.state.badTitle}`);
//title
document.title = this.state.badTitle;
up.plugins.setPageTitle(this.state.badTitle || " ");//ios ""
}
render() {
//
// props
return <WrappedPage {...this.props} />;
}
}
}
in reverse inheritance mode: state can be manipulated but WrappedPage"s componentWillMount and componentWillMount will not be executed.
export default function mixinsPage(WrappedPage) {
//
return class Page extends WrappedPage {
constructor(props) {
super(props);
}
componentWillMount() {
//
up.plugins.setRightButton();
}
componentDidMount() {
//title
document.title = this.state.badTitle;
up.plugins.setPageTitle(this.state.badTitle || " ");//ios ""
}
shouldComponentUpdate(nextProps, nextState) {
console.log(nextState);
}
render() {
//
// props
// return <WrappedPage {...this.props} />;
// :state
return super.render()
}
}
}previous unified processing logic of vueJs!
//vueJs mixins
beforeCreate() {
//
plugins.setRightButton();
},
created() {
// log.clearLogs();
console.log(`created=>${this.badTitle}`);
//title
document.title = this.badTitle;
plugins.setPageTitle(this.badTitle || " ");//ios ""
},