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

followWinter

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'))
  • 效果
    clipboard.png
  • 说明
    这个就是所为的HOC了,其实也没有啥,就是传入一个组件,返回另一个组件,但是这其中的作用可就大多了,返回的新的组件有自己的生命周期,并且可以操控传入组件的属性,react-reduxconnect实现方式就和这类似。

0x003 总结

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

阅读 594

漫漫填坑路,十里长安响码声。
哎,好像不能申请多个专栏呢,原本这个专栏只放前端文章,现在看来不行了!就都放吧!

暂时没有

1.5k 声望
54 粉丝
0 条评论

暂时没有

1.5k 声望
54 粉丝
宣传栏