react高阶组件-阿里云开发者社区

react高阶组件

2022-06-09 113

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： react高阶组件

高阶函数

高阶函数是指这样一种函数：接收函数作为参数，或将函数作为参数，或将函数作为输出返回。在前面的内容中介绍了使用map()函数实现列表渲染的例子，实际上就是用JavaScript内置的高阶函数实现的。理解了高阶函数的定义，那么它有何价值和作用呢？它的目的和组件拆分类似：将复杂逻辑拆分成可复用的更小的逻辑单元。

高阶函数的典型用法如下：

const add = x => y => x + y
console.log(add(1)(2))     // 3
复制代码

上面代码看起来晦涩难懂，因为使用es6箭头函数进行了简写，经过babel转换后，代码看起来就直观易懂了。

var add = function add(x) {
    return function(y) {
        return x + y
    }
}
console.log(add(1)(2)    // 3
复制代码

高阶组件

高阶函数本质上就是一个函数，特殊的是它的接收值和返回值都是函数。类似地，高阶组件本质上也是一个函数，特殊的是它的接收值和返回值都是组件。

例如，需要给每个组件添加值为ok的status属性，可以定义一个Container高阶组件，代码如下：

const Container = e => {
    class extends React.Component {
        return () {
            let newProps = { status: 'ok' }
            return <e { ...this.props }{ ...newProps } />
        }
    }
}
复制代码

上述实现方式称为属性代理，高阶组件在render()函数中返回了传入的React组件，并且可以传递和添加新的属性（Props）

props在React中可以使用它进行组件之间的参数传递。

属性代理实现的高阶组件使用起来也十分简单，只需用高阶组件包裹起来，然后正常调用即可。例如，返回hello world的app组件，代码如下：

export default class App extends React.Component {
    render() {
        return (
            <div>hello world</div>
        )
    }
}
复制代码

使用高阶组件Container向app组件添加值为ok的status属性，代码如下：

class App extends React.Component {
    render() {
        return (
            <div>hello world</div>
        )
    }
}
export default Container(App)
复制代码

此时，调用该组件的写法没有任何的改变，代码如下:

import App from "./App"
ReactDOM.render(<App />, document.getElementById('root')
复制代码

另外，还可以通过es6新增的装饰器(decorator)进一步简化高阶组件的调用。

@Container
export default class App extends React.Component {
    render() {
        return (
            <div>hello world</div>
        )
    }
}
复制代码