[React] High-Order Components

10989 ワード
HoC React テキストリンク
HOCって何?
HOCはreact APIではありません.反応素子の特性から現れる設計パターン.外観とcontainer設計モードをご存知の場合は、HOCモードの理解に役立ちます.
私が理解しているHOCモードの核心は、サブスクリプションまたは論理の関連部分をHOCに分離し、多くのコンポーネントが共同で使用する論理を集中させることです.これにより、メンテナンスとメンテナンス性が向上します.
HOCを実施する.
VelopertのHOCについての情報を参考にしました
HOCの命名は通常with~~~で始まる.次の例示的なコードは、論理を、要求APIのPostCommentコンポーネントからwithRequestと呼ばれるHOCに分離する.
Post.js
import React from "react";
import withRequest from "./HOCs/withRequest";

class Post extends React.Component {
  render() {
    const { data } = this.props;

    if (!data) return null;

    return <div>{JSON.stringify(data)}</div>;
  }
}

export default withRequest("https://jsonplaceholder.typicode.com/todos/2")(
  Post
);
Comment.js
import React from "react";
import withRequest from "./HOCs/withRequest";

class Comments extends React.Component {
  render() {
    const { data } = this.props;

    if (!data) return null;

    return <div>{JSON.stringify(data)}</div>;
  }
}

export default withRequest("https://jsonplaceholder.typicode.com/todos/1")(
  Comments
);
withRequest.js
import React from "react";
import axios from "axios";

const withRequest = (url) => (WrappedComponent) => {
  return class extends React.Component {
    state = {
      data: null
    };

    async initialize() {
      try {
        const response = await axios.get(url);

        this.setState({
          data: response.data
        });
      } catch (error) {
        console.log(error);
      }
    }

    componentDidMount() {
      this.initialize();
    }

    render() {
      const { data } = this.state;
      return <WrappedComponent {...this.props} data={data} />;
    }
  };
};

export default withRequest;
に感銘を与える
反応素子としてのパターンとcustom hookとpresentational,containerの2つのケースしか知らない.これはチャンスで、HOCに対してもっと深く理解して、そして后のプロジェクトの中で私达の技能を高めることを望んでいます.
redis学習ノート1
node.jsでredisと組み合わせてセッションを実現