~~~
//通过上下文对象向下层组件提供store
Provider,
~~~
~~~
import React from 'react';
/**
写一个函数，然后参数是一个组件
高阶组件用来解决组件间的逻辑复用问题
高阶 高阶函数 函数可以作为函数的参数或者返回值，这就叫同阶函数
高阶 高阶组件 组件可以作为函数的参数或者返回值，这就叫同阶组件
*/
function withLogger(WrappedComponent){
return class extends React.Component{
componentWillMount(){
this.start = Date.now();
}
componentDidMount(){
console.log(`此组件渲染一共花了${Date.now()-this.start}ms`);
}
render(){
return <WrappedComponent/>
}
};
}
let Hello = ()=><div>hello</div>;
Hello = withLogger(Hello);
export default Hello;
~~~
~~~
import React from 'react';
import ReactDOM from 'react-dom';
import store from '../store';
import actions from '../store/actions/counter2';
import {connect} from '../react-redux-old';
import PureComponent from './PureComponent';
class Counter2 extends PureComponent{
render(){
console.log('Counter2 render')
return (
<div style={{border:'1px solid green'}}>
<p>{this.props.number}</p>
<button onClick={this.props.add}>+</button>
<button onClick={this.props.minus}>-</button>
</div>
)
}
}
//把状态对象映射为属性对象 1.使用起来更简单了 2.减少了无用的渲染,这个组件派发组件，只会修改某一个
//子状态，然后只会引发这个子状态关联的组件刷新
let mapStateToProps = state=>state.counter2;
//柯里化 actions动作输出
export default connect(mapStateToProps,actions)(Counter2);
~~~
