import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
class InputComponent extends Component {
componentWillReceiveProps(){
}
render() {
return <div>{this.props.name}</div>
}
}
// function logProps (InputComponent) {
// InputComponent.prototype.componentWillReceiveProps = function(nextProps){
// console.log('current props' , this.props)
// console.log('next props' , nextProps)
// };
// //污染原型鏈耍鬓，不推薦
// return InputComponent;
// }
function logProps (WrappedComponent) {
return class extends Component {
componentWillReceiveProps(nextProps) {
console.log('current props' , this.props)
console.log('next props' , nextProps)
}
render() {
return <WrappedComponent {...this.props} />;
}
}
}
const EnhancedComponent = logProps(InputComponent)
let name = 'xxx'
setInterval(()=>{
name += 'hahaha'
ReactDOM.render(<EnhancedComponent name={name}/>, document.getElementById('root'));
},2000)
serviceWorker.unregister();
高階函數(shù)對組件的封裝周叮，譬如多個組件大部分相同，只是需要局部變化界斜，可通過高階函數(shù)來進行封裝處理。
