React高阶组件的一些个人理解

1.无状态组件

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;

}//这类组件没有自身的state

2.web组件

这类组件一般会有自身状态，他们可以通过setState()来更新自己的状态。我们一般使用这种组件去实现一些逻辑功能，他们可以使用无状态组件。当然了，他自己也可以给其他组件使用，这也体现了react组件良好的封装性。例如下面的组件：

class HelloMessage extends React.Component {

constrcutor(props){ super(props)};

componentDidMount(){}

render() {

return <div>

</div>;

}

这类组件中，我们可以干很多事情，例如和后台交换数据。几乎自己写的小demo都可以采用这种方式去更新自己，在钩子函数中拿数据，在事件处理函数中更新状态并发送数据给后台。例如：

class HelloMessage extends React.Component {

constrcutor(props){ super(props)};

componentDidMount(){

let url = '//请求的后台路劲'

fetch( url , {//配置参数

method: "POST",

header : { "content-type : application/json"}

}).then(response=>response.json()).then(json=>{

//假设我们成功拿到了数据json

this.setState({ json })//我们就可以在这拿到数据并设置成自身的state,render方法会被调用更新视图

})

}

handleChange = () =>{}//如果需要和后台交互数据继续在这里发送fetch请求

render() {

return <div onClick={this.handleChange}>{this.state.json}</div>;

}

这样我们就完成了一次完整的于后台交互的过程。我们只需要在handleChange方法中调用fecth就行了，拿到后台更新的数据后掉setState({})去更新视图。

3.高阶组件

在官方文档上，讲述了什么是高阶组件以及为什么要高阶组件。高阶组件可以认为是提升代码质量的一种手段（让你不去干重复的事情，何乐而不为呢？）。高阶组件不是组件，他其实是一个函数，这点一定要清楚，这样就可以开始写一个高阶组件了。

https://reactjs.org/docs/higher-order-components.html

function higherOrderComponent(WrappedComponent , [params]) {
return class MyComponent extends React.Component {
componentWillMount() {
let data = fetch()//调用后拿到的数据给了data
this.setState({data});
}
render() {
// 通过{...this.props} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
return <WrappedComponent data={this.state.data} {...this.props} />
}
}

}

在上面这个高阶组件中，我们调用higherOrderComponent方法，就会得到一个有趣的组件。这个组件不仅包含了自身的所有属性，他还得到了一个props.data，这个属性中有fetch拿到的数据，我并没有使用第二个参数params，其实在这个例子中他就可以作为url传递给fetch的参数，这样，如果有2个组件需要拿数据的话，其实我们只需要调这个方法就可以了。在组件MyComponent 中，我们能做的当然不仅仅只是fetch一条数据这么简单！！！你完全可以定义一些事件函数！

为了更清楚的描述这种组件，我们采用一种清晰的定义方式

function higherOrderComponent = (params) => (WrappedComponent) =>{
return class extends Component {
componentWillMount() {
let data = fetch()//调用后拿到的数据给了data
this.setState({data});
}
render() {
// 通过{...this.props} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
return <WrappedComponent data={this.state.data} {...this.props} />
}
}

}

对，是不是很熟悉，没错。redux中的connect方法就是这么干的

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(Component)

在这里你就可以认为fetch拿到的数据挂载到WrappedComponent在connect方法中就是mapStateToProps方法干的事情，

而从store中拿方法给WrappedComponent就是mapDispatchToProps干的事情!!!很奇妙吧，我也觉得。。。这东西还会让我想起闭包~扯远了。在redux中我们就是通过 const MyCompoenet = connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(Component)得到一个连接好redux的store的组件的。如果你对redux不熟悉，那还在等什么，赶快学习吧！这里也是为了体现高阶组件的作用。在react-router中当你使用withRouter的时候，你会发现这也是高阶组件。。（这么啰嗦是因为真的用的多！）。

4.封装react组件（闲谈）

function MyComponent(props) {
function handleChange (value) {
props.handlechange(value)
}
return (
<div>
<Component value={props.value} //绑定值
onChange={handleChange}
/>
</div>
)

}

export defaule MyComponent;

当我们写好Component组件后，可以使用闭包的方式给Component组件暴露一些接口，上面的MyComponent方法就暴露了hangleChange这个接口。我们在外部，可以通过这种方式使用这个接口，

import MyComponent from '/path';

<MyComponent hangleChange={//外部方法} value = {//外部value}/>//暴露其他接口调用，这里只暴露2个接口，一个是用来处理value变化的，一个是绑定props的vaue的。相信你如果在学习封装的话会有启发咯

写的不好的希望多多指正，我也一直在学习react全家桶，想一起学习可联系我哦。一起加油!