React 高阶组件（Mixin代替方法）

最新推荐文章于 2024-09-15 18:53:59 发布

a_salt_fish

最新推荐文章于 2024-09-15 18:53:59 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： react.js 文章标签： react

本文链接：https://blog.youkuaiyun.com/a_salt_fish/article/details/87741430

react.js 专栏收录该内容

1 篇文章

订阅专栏

在React 16及以后版本中，使用高阶组件作为混入的常见方式。高阶组件是一个无副作用的纯函数，可以用于减少组件间的代码重复。通过将通用逻辑封装到高阶组件中，可以创建新的组件，从而简化代码，提高复用性。高阶组件通过接收一个组件并返回新的组件来实现功能增强，让目标组件专注于自身的业务逻辑。

在React.js 16之后 es6 我们一般使用高阶组件来试下混入，也就是说我们在组件引入前做一些自己的操作。

高阶组件

高阶组件就是一个没有副作用的纯函数。

我们把上一节的函数统统改成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 (
            <div>welcome {this.state.username}</div>
        )
    }
}

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 (
            <div>goodbye {this.state.username}</div>
        )
    }
}

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 <WrappedComponent username={this.state.username}/>
        }
    }

    return NewComponent
}

这样我们就能简化Welcome组件和Goodbye组件。

import React, {Component} from 'react';
import wrapWithUsername from 'wrapWithUsername';

class Welcome extends Component {

    render() {
        return (
            <div>welcome {this.props.username}</div>
        )
    }
}

Welcome = wrapWithUsername(Welcome);

export default Welcome;

import React, {Component} from 'react';
import wrapWithUsername from 'wrapWithUsername';

class Goodbye extends Component {

    render() {
        return (
            <div>goodbye {this.props.username}</div>
        )
    }
}

Goodbye = wrapWithUsername(Goodbye);

export default Goodbye;

看到没有，高阶组件就是把username通过props传递给目标组件了。目标组件只管从props里面拿来用就好了。

参考文章：http://react-china.org/t/react-higher-order-components/14949/2