React手稿之高阶组件

dkzwm 发布于2019-08-26 12:22 / 2202人阅读

摘要：示例使用场景代码复用类似版本之前的。多个组件同用一段代码，或者同样的方法时，可以使用。示例在线示例抽象和更改可以通过包裹的组件公共抽象出来。可以通过包裹的组件传递修改添加等的示例渲然劫持条件渲然。示例反向继承返回的高阶组件类继承了。

Higher-Order Components

HOC 不是React的标准API。

HOC 是一个函数。

HOC 返回一个Component。

示例：

const EnhancedComponent = higherOrderComponent(WrappedComponent);

使用场景 代码复用

类似React 0.15版本之前的mixin。

多个组件同用一段代码，或者同样的方法时，可以使用HOC。

示例：

import React, { PureComponent } from "react";

const Common = (WrapComponent) => {
  return (
    
      Title
      
    
  );
};

const Header = () => Header;
const Footer = () => Footer;

export default class extends PureComponent {
  render() {
    return (
      
        
          Header Component
          {Common(Header)}
        
        
        
          Footer Component
          {Common(Footer)}
        
      
    );
  }
}

在线示例

抽象state和更改props

可以通过WrappedComponent包裹的组件公共state抽象出来。

可以通过WrappedComponent包裹的组件传递修改、添加等的props.

示例：

const HOComp = (WrappedComponent) => {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {name: ""};
    }

    componentDidMount() {
      this.setState({name: WrappedComponent.displayName || WrappedComponent.name || "Component";});
    }

    return 
  }
}

渲然劫持

条件渲然。根据props或者state条件返回在渲然的内容。

示例：

const HOComp = (WrappedComponent) => {
  return class Enhancer extends WrappedComponent {
    render() {
      if (this.props.loggedIn) {
        return super.render()
      } else {
        return null
      }
    }
  }
}

反向继承

返回的高阶组件类（Enhancer）继承了 WrappedComponent。

示例：

const EnchanceComponent = (WrappedCompopnent) => {
  return class extends WrappedCompopnent {
    constructor(props) {
      super(props);
      this.state = { error: "" };
    }
    componentDidMount() {
      /*do something*/
      super.componentDidMount();
    }
    render() {
      if (this.state.error) {
        return {this.state.error};
      } else {
        return super.render();
      }
    }
  }
};

在线示例

云服务器 GPU云服务器高阶组件手稿高阶函数高阶

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108570.html

React手稿之 React-Redux

摘要：属性是必须的。需要一个与的一致。必须在的返回原。调试插件日志安装组件。然后加入到中即可例如扩展程序需要在应用市场安装然后在中使用增强功能将加入即可在线实例推荐阅读手稿 React-Redux Redux Action function addTodo(text) { return { type: ADD_TODO, text } } type 属性是必须的。...

Freelander 2019-08-23 12:57 评论0 收藏0
React手稿之State Hooks of Hooks

摘要：官方也陈述，接下来的的工作会投入到中。从目前官方的文档可以看出，从以下四个方面来提高的编码。生命周期自定义方法的主要用途是替代之前版本的组件。说明到目前为止，在已发布的版本中有该功能，想体验该功能，必须安装。 React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念，目前还是Proposal阶段。官方也陈述，接下来的90%的工作会投入到React ...

DC_er 2019-08-23 13:53 评论0 收藏0
React手稿之类型检查

摘要：类型检查是为了确保传入组件的参数正确性。通常在项目中可以使用或者来实现。示例以上内容在实现一个通用组件时非常有用。类型检查和参数默认值一起使用，保证组件的正常运行。 Typechecking With PropTypes 类型检查是为了确保传入组件的参数正确性。通常在项目中可以使用Flow或者TypeScript来实现。 React提供了PropTypes来检查类型。示例： imp...

tomorrowwu 2019-08-26 12:24 评论0 收藏0
React.memo

摘要：介绍之前，先了解一下和。不同是没有实现，而通过和的浅比较实现了。如果组件的和相同时，的内容也一致，那么就可以使用了这样可以提高组件的性能。例如当和中有复杂数据结果时，不好使用。示例这种方式依然是一种对象的浅比较，有复杂对象时无法。介绍React.memo之前，先了解一下React.Component和React.PureComponent。 React.Component React...

Meils 2019-08-23 12:52 评论0 收藏0
React 手稿 - Component state

摘要：实例在线实例定义写在函数中，是一个对象。一般情况下需要指定默认值，预防抛使用在组件中通过访问组件对象属性的方式。把这种组件也称为非受控性组件。通过提供了方法，来实现的修改。回调非控组件在线实例受控组件在线实例推荐阅读手稿 Component state 实例： import React, { PureComponent } from react; export default cla...

dcr309duan 2019-08-23 12:55 评论0 收藏0