React入门0x018: 高阶函数组件(HOC)

最新推荐文章于 2025-05-23 19:27:46 发布

转载最新推荐文章于 2025-05-23 19:27:46 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000017241965

文章标签：

#javascript #ViewUI

本文深入探讨了React中的高阶组件(HOC)概念，通过示例展示了如何使用HOC来增强组件，使其能在不修改原始组件代码的情况下，动态地在不同的状态管理策略间切换，如redux和localstorage。

0x000 概述

高阶函数组件...还是一个函数，和函数组件不同的是他返回了一个完整的组件...他返回了一个class！！！

0x001 直接上栗子

照常，先写个App组件，外部传入一个theme

class App extends React.Component {
    render() {
        return (
            <div>
                App theme: {this.props.theme}
            </div>
        );
    }
}

写一个函数，传入一个组件返回新的一个类组件，新的类组件渲染了传入的组件，并添加theme到传入的组件中

const withTheme = (OriginComponent) => {
    return class WrappedComponent extends React.Component {
        render() {
            return (
                <OriginComponent theme={'dark'}/>
            );
        }
    }
}

调用组件
```
let ThemeApp = withTheme(App)
```

渲染

ReactDom.render(
    <ThemeApp/>,
document.getElementById('app'))

效果
说明
这个就是所为的HOC了，其实也没有啥，就是传入一个组件，返回另一个组件，但是这其中的作用可就大多了，返回的新的组件有自己的生命周期，并且可以操控传入组件的属性，react-redux的connect实现方式就和这类似。

0x003 总结

其实，这个和React的思想有很大的渊源，React不推荐继承，而是推荐组合，而HOC就是其中的典范。比如我们写了两个个with*高阶组件，一个是withRedux，一个是withLocalstorage，组件就可以随意的在redux和locaostorage之间随意切换，而不需要改动组件原有代码。