高阶组件
一、高阶函数
接收函数作为输入，或者输出另一个函数的一类函数，被称作高阶函数。对于高阶组件，它描述的便是接受React组件作为输入，输出一个新的React组件的组件。更通俗地描述为，高阶组件通过包裹（wrapped）被传入的React组件，经过一系列处理，最终返回一个相对增强（enhanced）的React组件，供其他组件调用。
二、高阶组件
定义：高阶函数就是一个函数，且该组件接受一个组件作为参数，并返回一个组件
高阶组件
高阶组件就是一个没有副作用的纯函数。
- 最普通的组件哦。
welcome函数转为react组件。
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 (
welcome {this.state.username}
)
}
}
export default Welcome;goodbey函数转为react组件。
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 (
goodbye {this.state.username}
)
}
}
export default Goodbye;- 现在你是不是更能看到问题所在了？两个组件大部分代码都是重复的唉。
按照上一节wrapWithUsername函数的思路，我们来写一个高阶组件(高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件)。
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
}
}
return NewComponent
} 这样我们就能简化Welcome组件和Goodbye组件。
import React, {Component} from 'react';
import wrapWithUsername from 'wrapWithUsername';
class Welcome extends Component {
render() {
return (
welcome {this.props.username}
)
}
}
Welcome = wrapWithUsername(Welcome);
export default Welcome;import React, {Component} from 'react';
import wrapWithUsername from 'wrapWithUsername';
class Goodbye extends Component {
render() {
return (
goodbye {this.props.username}
)
}
}
Goodbye = wrapWithUsername(Goodbye);
export default Goodbye; 看到没有，高阶组件就是把username通过props传递给目标组件了。目标组件只管从props里面拿来用就好了。
到这里位置，高阶组件就讲完了。你再返回去理解下定义，是不是豁然开朗~
你现在理解react-redux的connect函数~
把redux的state和action创建函数，通过props注入给了Component。
你在目标组件Component里面可以直接用this.props去调用redux state和action创建函数了。
ConnectedComment = connect(mapStateToProps, mapDispatchToProps)(Component);相当于这样
// connect是一个返回函数的函数（就是个高阶函数）
const enhance = connect(mapStateToProps, mapDispatchToProps);
// 返回的函数就是一个高阶组件，该高阶组件返回一个与Redux store
// 关联起来的新组件
const ConnectedComment = enhance(Component);antd的Form也是一样的
const WrappedNormalLoginForm = Form.create()(NormalLoginForm);三、使用方式
参考博客：https://www.jianshu.com/p/0aae7d4d9bc1
１）属性代理
属性代理是最常见的高阶组件的使用方式，上述描述的高阶组件就是这种方式。它通过做一些操作，将被包裹组件的props和新生成的props一起传递给此组件，这称之为属性代理。
export default function withHeader(WrappedComponent) {
return class HOC extends Component {
render() {
const newProps = {
test:'hoc'
}
// 透传props，并且传递新的newProps
return
...this.props } {...newProps}/>
}
}
}通过属性代理，我们可以实现：
- 更改 props
- 通过 refs 获取组件实例
- 抽象 state
- 把 WrappedComponent 与其它 elements 包装在一起
２）反向继承
这种方式返回的React组件继承了被传入的组件，所以它能够访问到的区域、权限更多，相比属性代理方式，它更像打入组织内部，对其进行修改。反向继承允许高阶组件通过 this 关键词获取 WrappedComponent，意味着它可以获取到 state，props，组件生命周期（component lifecycle）钩子，以及渲染方法（render）
export default function (WrappedComponent) {
return class Inheritance extends WrappedComponent {
componentDidMount() {
// 可以方便地得到state，做一些更深入的修改。
console.log(this.state);
}
render() {
return super.render();
}
}
}通过反向继承，我们可以实现：
- 渲染劫持（Render Highjacking）
- 操作 state
渲染劫持
它被叫做渲染劫持是因为高阶组件控制了 WrappedComponent 生成的渲染结果，并且可以做各种操作。
通过渲染劫持你可以：
- 『读取、添加、修改、删除』任何一个将被渲染的 React Element 的 props
- 在渲染方法中读取或更改 React Elements tree，也就是 WrappedComponent 的 children
- 根据条件不同，选择性的渲染子树
- 给子树里的元素变更样式
*渲染 指的是 WrappedComponent.render 方法
你无法更改或创建 props 给 WrappedComponent 实例，因为 React 不允许变更一个组件收到的 props，但是你可以在 render 方法里更改子元素/子组件们的 props。
就像之前所说的，反向继承的高阶组件不能保证一定渲染整个子元素树，这同时也给渲染劫持增添了一些限制。通过反向继承，你只能劫持 WrappedComponent 渲染的元素，这意味着如果 WrappedComponent 的子元素里有 Function 类型的 React Element，你不能劫持这个元素里面的子元素树的渲染。
【注意】参考博文：https://segmentfault.com/a/1190000010371752#articleHeader1
https://github.com/brickspert/blog/issues/2
https://www.jianshu.com/p/0aae7d4d9bc1