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();
高阶函数对组件的封装，譬如多个组件大部分相同，只是需要局部变化，可通过高阶函数来进行封装处理。
