高阶函数：
高阶函数只要满足参数或返回值为函数就可以成为高阶函数，而非一定要同时满足才成立。
高阶组件：
高阶组件是以组件作为参数的组件，结果return一个组件
高阶函数：至少满足下列一个条件的函数。
- 函数作为参数传入
- 返回值为一个函数
简单的例子：
function add(a,b,fn){
return fn(a)+fn(b);
}
var fn=function (a){
return a*a;
}
add(2,3,fn); //13
还有一些平时常用的高阶方法： 如Map, Reduce, Filter, Sort 以及现在常用的redux中的connect方法也是高阶函数。
var pow = function square(x) {
return x * x;
};
var array = [1, 2, 3, 4, 5, 6, 7, 8];
var newArr = array.map(pow); //直接传入一个函数方法
var newArr = array.map((item) => {return item * item}); //里面运用一个函数
//返回的一个函数
alert(newArr); // [1, 4, 9, 16, 25, 36, 49, 64]
高阶组件就是一个React组件包裹着另外一个React组件。
// It's a function...
function myHOC() {
// Which returns a function that takes a component...
return function(WrappedComponent) {
// It creates a new wrapper component...
class TheHOC extends React.Component {
render() {
// And it renders the component it was given
return <WrappedComponent {...this.props} />;
}
}
// Remember: it takes a component and returns a new component
// Gotta return it here.
return TheHOC;
}
}
高阶组件是个纯函数。 接受一个组件参数，然后再return里面是返回一个组件，用来把两个类似的组件进行封装， 然后再高阶组件里面把公共部分写好，然后传给组件。
//Welcome 组件
import React, {Component} from 'react'
class Welcome extends Component {
constructor(props) {
super(props);
this.state = {
username: ''
}
}
componentWillMount() {
let username = localStorage.getItem('username');
this.setState({
username: username
})
}
render() {
return (
<div>welcome {this.state.username}</div>
)
}
}
export default Welcome;
//goodbye 组件
import React, {Component} from 'react'
class Goodbye extends Component {
constructor(props) {
super(props);
this.state = {
username: ''
}
}
componentWillMount() {
let username = localStorage.getItem('username');
this.setState({
username: username
})
}
render() {
return (
<div>goodbye {this.state.username}</div>
)
}
}
export default Goodbye;
从上述可见，这两个组件虽然功能不一样，但是两个组件有许多一样的代码，这样感觉就非常的多余。所以，我们就可以做一个高阶组件来整合。
import React, {Component} from 'react'
export default (WrappedComponent) => {
class NewComponent extends Component {
constructor() {
super();
this.state = {
username: ''
}
}
componentWillMount() {
let username = localStorage.getItem('username');
this.setState({
username: username
})
}
render() {
return <WrappedComponent username={this.state.username}/>
}
}
return NewComponent
}
然后分别调用高阶组件
//高阶的Welcome组件
import React, {Component} from 'react';
import wrapWithUsername from 'wrapWithUsername';
class Welcome extends Component {
render() {
return (
<div>welcome {this.props.username}</div>
)
}
}
Welcome = wrapWithUsername(Welcome);
export default Welcome;
//高阶的goodbye组件
import React, {Component} from 'react';
import wrapWithUsername from 'wrapWithUsername';
class Goodbye extends Component {
render() {
return (
<div>goodbye {this.props.username}</div>
)
}
}
Goodbye = wrapWithUsername(Goodbye);
export default Goodbye;
tips:
1、官方推荐在高阶组件里尽量不要设置state值， 传值的话可以用props的方法。
2、尽量不去改变原始组件，而是通过组合的方式
