React使用高阶组件来重构代码

最新推荐文章于 2024-03-20 09:32:05 发布

tpf1220

最新推荐文章于 2024-03-20 09:32:05 发布

阅读量576

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u011455192/article/details/81016298

本文介绍了一种在React中利用高阶组件进行代码重构的方法，通过示例展示了如何减少重复代码，提高组件复用性和代码整洁度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React高阶组件

有时候，我们的组件中可能有很多的组件基本内容一样，只是其中某一部分不同，或者是请求地址不同，或者是组件中的处理方式不同，我们可以使用高阶组件，来进行重构，让代码看起来更加简洁高大上。

比如有以下两个组件：

    //Bar.js
    const Bar = (props) => (
        <div>
            <h1>{props.name}</h1>
        </div>
    )

    //Foo.js
    const Foo = (props) => (
        <div>
            <h2>{props.name}</h2>
        </div>
    )

可以看到，两个组件基本相同，只是一个是h1,一个是h2，当然我们只是举个例子，肯定组件也没这么简单的，会有一些自己定义的方法等等。我们可以写一个高阶组件，高阶组件就是一个方法，他的参数是一个组件，然后返回的还是一个组件，这样的就叫做高阶组件

    const high = (WrapperComonent) => {
        return class extends Component {
            render() {
                return <WrapperComponent { ...this.props }/>
            }
        }
    }

    const Bar = high((props)=>(
        <h1>{ props.name }</h1>
    ))

    const Foo = hign((props) => (
        <h2>{ props.name }</h2>
    ))

这样就可以正常运行了，可以试试看。