React系列之高阶组件

落落落洛克 等级 924 0 0

我的前端学习笔记📒

最近花了点时间把笔记整理到语雀上了,方便童鞋们阅读

React系列之高阶组件

React系列之高阶组件

背景

用到的原因是因为公司最近要做一个钉钉oa系统,选的技术栈则是比较火热的react,开发中遇到的问题就是代码如何复用问题,因为react官方已经不推荐使用Mixins,而是推荐了高阶组件这种方式,接下来我们就来聊聊它

高阶组件的概念

a higher-order component is a function that takes a component and returns a new component.

意思是:高阶组件是一个函数,它接受一个组件并返回一个新组件

利用函数带你理解高阶组件

举个例子🌰:假设我们现在需要实现一个登陆注册功能,为了方便,我们把用户(user)存在localStorage下,如果发生操作行为就会先去检测下有没有user (当然现实开发不可以这样做的)

代码实现:

// 登陆
  function login() {
    let user = localStorage.getItem('user');
    console.log('login ' + login);
}
// 注册
function resgister() {
    let user = localStorage.getItem('user');
    console.log('resgister ' + user);
}

login();
resgister();

上面的例子我们发现都有一句一模一样的冗余代码,这显然对于有代码洁癖的人简直不能忍,那就动手将它抽离出来挨打吧

代码实现:

// 登陆
  function login() {
    console.log('login ' + login);
}
// 注册
function resgister() {
    console.log('resgister ' + user);
}
// 抽离出来的中间函数
function wrapUser(Wrapfunc) {
    let Newfunc = () => {
       let user = localStorage.getItem('user');
       Wrapfunc(user);
    };
    return Newfunc;
}
// 调用
login = wrapUser(login);
resgister = wrapUser(resgister);
login();
resgister();

以上的例子我们可以把wrapUser称为高阶函数,它负责的是就是把我们共用代码抽离的出来,这样简化了复用的代码,很多同学会问,上面的代码量不是更加多了吗?但是实际开发项目时候复用的代码可不是这么一丁点,还有可能有其他需求产生复用这段代码就比如产品临时加了需要忘记密码的功能

代码如下:

 function forgetPassWord(){
    console.log('forgetPassWord ' + user);
 }
 forgetPassWord = wrapUser(forgetPassWord);
 forgetPassWord()

从高阶函数来看高阶组件

上面的代码如果用react方式是怎么实现的

Login组件

import React, {Component} from 'react'
class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user: ''
        }
    }

    componentWillMount() {
        let user = localStorage.getItem('user');
        this.setState({
            user
        })
    }

    render() {
        return (
            <div>login{this.state.user}</div>
        )
    }
}

export default Login;

Register组件

import React, {Component} from 'react'
class Register extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user: ''
        }
    }
    componentWillMount() {
        let user = localStorage.getItem('user');
        this.setState({
            user
        })
    }
    render() {
        return (
            <div>register{this.state.user}</div>
        )
    }
}

export default Register;

可以看到这个组件这两个组件都有复用的代码,所以我们上述高阶函数wrapUser的例子来实现高阶组件

WrapUser高阶组件

import React, {Component} from 'react'

export default (WrapComponent) => {
    // 这里的WrapComponent是我们传进来的组件
    class NewComponent extends Component {
        constructor() {
            super();
            this.state = {
                user: ''
            }
        }

        componentWillMount() {
            let user = localStorage.getItem('user');
            this.setState({
                user
            })
        }

        render() {
            return <WrapComponent user={this.state.user}/>
        }
    }

    return NewComponent
}

上述的代码是声明一个函数这个函数从参数是接收一个组件,然后return回去一个新的组件,咋一看有同学发现这个很像是父组件套了一个子组件,没错实际上就是这样的,而且他们的通信也是父子组件通信

这样我们来简化下login组件和register组件

Login组件

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

class Login extends Component {

    render() {
        return (
            <div>login{this.props.user}</div>
        )
    }
}

Login = WrapUser(Login);

export default Login;

Register组件

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

class Register extends Component {

    render() {
        return (
            <div>register{this.props.user}</div>
        )
    }
}

Register = WrapUser(Register);

export default Register;

到这里我们代码复用性的问题就解决了,高阶组件实际就是一个函数,并不要被它的名称所吓倒

总结

  • 高阶组件的目的就是为了解决代码复用性问题
  • 高阶组件的通信是按照父子通信机制的

我的前端学习笔记📒

最近花了点时间把笔记整理到语雀上了,方便童鞋们阅读

React系列之高阶组件

React系列之高阶组件

收藏
评论区

相关推荐

做了N+1个企业项目之后, 我总结了这些React必备插件
为了提高大家开发 React 项目的效率, 笔者结合自己的实际工作经验, 汇总如下React项目常用插件. 1. 状态管理 Redux JavaScript 状
做了N+1个企业项目之后, 我总结了这些React必备插件
为了提高大家开发 React 项目的效率, 笔者结合自己的实际工作经验, 汇总如下React项目常用插件. 1. 状态管理 Redux JavaScript 状
Hook 规则 – React
Hook 规则 _Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook 本质就是 JavaScript 函数,但是在使用它时需要遵循两条规则。我们提供了一个 linter 插件(https://www.npmjs.com/package/
2020前端面试系列之JSX是什么
**前言** 众所周知React Native开发中,页面View书写布局采用了React 的JSX语法,而在ReactNative面试中可能会遇到有关JSX相关的面试题,今天和大家分享有关JSX的知识,为你的面试助一臂之力。 **JSX的定义** JSX到底是什么?我们先看看\[React官网\](https://reactjs.org/docs/g
2020前端面试系列之JSX是什么
**前言** 众所周知React Native开发中,页面View书写布局采用了React 的JSX语法,而在ReactNative面试中可能会遇到有关JSX相关的面试题,今天和大家分享有关JSX的知识,为你的面试助一臂之力。 **JSX的定义** JSX到底是什么?我们先看看\[React官网\](https://reactjs.org/docs/g
Angular React Vue我应该选择什么?
2017 年比较 Angular、React、Vue 三剑客 ============================== 为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事。现如今 [Angular](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Flink.juej
React Developers的10个超实用神奇工具
![](https://oscimg.oschina.net/oscnet/be7e96e371213baf084f2018a5e0ecd1d6e.jpg) ![](https://oscimg.oschina.net/oscnet/d1f601c7e7175b985b1000f935f5e3191f4.jpg) React是一个用于构建用户界面的Jav
React Native第三方组件和示例链接
以下是React Native的链接,有需要第三方组件或者示例的小伙伴可以收藏一下 01、React Native之Tab-View:https://js.coach/react-native/react-native-tab-view 02、React Native之正在加载Loading条:https://js.coach/react-native/
React Router 4.x 开发,这些雷区我们都帮你踩过了
前言 -- 在前端框架层出不穷的今天,React 以其虚拟 DOM 、组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库。作为 React 体系中的重要组成部分:React Router 也成为开发者首选的路由库,其主要功能是通过管理 url 实现组件的切换和状态的变化。 正文 -- 在 React Router
React 入门实例教程
作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React 。 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑。 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 Ja
React 第一个小游戏(井字棋)知识关键点
**1、React是一个声明式,高效且灵活的用于构建用户界面的JavaScript库** **通过使用组件来告诉React我们希望在屏幕上看到什么。当数据发生变化时,React会高效的更新并重新渲染我们的组件** **2、** **render返回了一个React元素,这是一种对渲染内容的轻量级描述。大多数的React开发者使用了一种名为"JSX"的特
React 设计思想
https://github.com/react-guide/react-basic React 设计思想 ========== > 译者序:本文是 React 核心开发者、有 React API 终结者之称的 Sebastian Markbåge 撰写,阐述了他设计 React 的初衷。阅读此文,你能站在更高的高度思考 React 的过去、现在和未来。
React前端开发入门与实战
**阿里云大学:[React前端开发入门与实战](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fclick.aliyun.com%2Fm%2F1000010022%2F)** 本课程主要讲解React的基础使用技巧及实战案例。 React 是一个用于构建用户界面的 JavaScript
React学习笔记
**React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。** !
阿里巴巴前端练习生学习笔记
字符串引擎和Javascript引擎的区别:是否对于DOM进行全部改变? 相关资料链接• Wiki MVC • Wiki MVVM • Mustach • Handlebars • React • Angular • Vue • Bootstrap • Ant Design • Fusion Des