5.前端设计模式之容器/展现模式

Enforce separation of concerns by separating the view from the application logic

通过将视图层和应用逻辑分离实现关注点分离 

这个有点像Java应用开发中经常看到的MVC架构模式，实现数据、业务逻辑和展示层分离。

这个模式在React中需要两个组件实现：容器组件主要负责获取数据，获取到数据后把数据交给视图组件，视图组件负责根据数据展现界面。

示例应用显示一组宠物狗图片：

容器组件DogImagesContainer只关心怎么获取数据不关系怎么展现数据。负责访问API获取宠物狗图片URL并交给视图组件DogImages：

import React from "react";
import DogImages from "./DogImages";

export default class DogImagesContainer extends React.Component {
  constructor() {
    super();
    this.state = {
      dogs: []
    };
  }

  componentDidMount() {
    fetch("https://dog.ceo/api/breed/labrador/images/random/6")
      .then(res => res.json())
      .then(({ message }) => this.setState({ dogs: message }));
  }

  render() {
    return <DogImages dogs={this.state.dogs} />;
  }
}

视图组件DogImages不关心怎么获取数据，只关系怎么展现数据:

import React from "react";

export default function DogImages({ dogs }) {
  return dogs.map((dog, i) => <img src={dog} key={i} alt="Dog" />);
}

这样就实现了关注点分离。完整代码

React 16.8后新增了Hooks功能，使用hook可以更简洁的实现关注点分离,使用自定义hook useDogImages负责怎么获取数据：

import { useState, useEffect } from "react";

export default function useDogImages() {
  const [dogs, setDogs] = useState([]);

  useEffect(() => {
    async function fetchDogs() {
      const res = await fetch(
        "https://dog.ceo/api/breed/labrador/images/random/6"
      );
      const { message } = await res.json();
      setDogs(message);
    }

    fetchDogs();
  }, []);

  return dogs;
}

在视图组件中使用自定义hook useDogImages拿到需要的数据并展现：

import React from "react";
import useDogImages from "./useDogImages";

export default function DogImages() {
  const dogs = useDogImages();

  return dogs.map((dog, i) => <img src={dog} key={i} alt="Dog" />);
}

完整代码