React 组件模式

简评：组件（component）是 React 的核心，了解它们有助于构建好的设计结构。

什么是组件（component）

组件运行你将 UI 拆分为独立的可重用的部分。和 JavaScript 函数类似，组件接收名为 props 的输入并返回 React 元素，它描述（声明）用户界面应该是什么样子的。这就是 React 被称为声明性 API 的原因，你只需要声明你希望得到的 UI ，之后 React 负责具体的细节。

组件 API

当安装 React 后，便可以使用 React 提供的 API，基本可以分成 5 种。

render
state
props
context
lifecycle events

虽然组件可以使用所有的 API，但是通常一个组件只使用部分的 API，我们可以对使用不同 API 的组件进行细分，分成有状态（stateful）和无状态（stateless）两种组件。

有状态组件使用（render，state 和生命周期相关事件）
无状态组件使用（render，props 和 context）

这样将数据逻辑和 UI 表现层进行分离，通过组件之间划分职责可以创建更多可重用的组件，在构建可扩展的应用程序时尤为重要。

组件模式

通常组件模式有以下几种：

Container
Presentational
高阶组件（Higher order components 【HOC’s】）
Render callback

container

容器组件（container component ）负责获取数据然后渲染部分交给相应的子组件来负责。

容器是你的数据或逻辑层并利用 stateful API，使用生命周期事件你可以连接 state 到 redux 或 flux 的 storage 中。在容器组件的 render 方法中，你可以使用 Presentational 组件来渲染具体的样式。

注意：由于容器组件需要使用 stateful api ，所以容器组件需要定义成类而不能是一个纯函数。

我们来定义一个组件 Greeting，他具有状态，生命周期 componentDidMount 事件和 render 方法。

class Greeting extends React.Component {
  constructor() {
    super();
    this.state = {
      name: "",
    };
  }

  componentDidMount() {
    // AJAX
    this.setState(() => {
      return {
        name: "William",
      };
    });
  }

  render() {
    return (
      <div>
        <h1>Hello! {this.state.name}</h1>
      </div>
    );
  }
}

现在我们对 Greeting 进行改进，将其分离成容器组件（container component）和展示组件（presentational component）。

Presentational

Presentational components 使用 props，render，和 context （stateless API’s），并且由于不需要使用生命周期相关api，我们可以使用纯函数来简化表述它们：

const GreetingCard = (props) => {
  return (
    <div>
      <h1>Hello! {props.name}</h1>
    </div>
  )
}

Presentational components 只从 props 获取数据和回调函数，props 由容器组件提供。

容器组件和展示组件各自将数据/逻辑和展示部分封装到各自的组件中：

const GreetingCard = (props) => {
  return (
    <div>
      <h1>{props.name}</h1>
    </div>
  )
}

class Greeting extends React.Component {
  constructor() {
    super();
    this.state = {
      name: "",
    };
  }

  componentDidMount() {
    // AJAX
    this.setState(() => {
      return {
        name: "William",
      };
    });
  }

  render() {
    return (
      <div>
       <GreetingCard name={this.state.name} />
      </div>
    );
  }
}

高阶组件（Higher order components【HOC’s】）

高阶组件是一个接收一个组件作为参数然后返回全新组件的函数。

这是一种强大的模式，我们可以对输入组件的 props 进行修改（增删改查）然后返回全新的修改后的组件，例如 react-router-v4 的 withRouter() 方法可以包装任何自定义组件，将 react-router 的 history,location,match 三个对象传入，不需要一级级传入。例如 Redux，你可以使用 connect({})() 方法来将展示组件和 store 中的数据进行连接。

代码演示：

import {withRouter} from 'react-router-dom';

class App extends React.Component {
  constructor() {
    super();
    this.state = {path: ''}
  }

  componentDidMount() {
    let pathName = this.props.location.pathname;
    this.setState(() => {
      return {
        path: pathName,
      }
    })
  }

  render() {
    return (
      <div>
        <h1>Hi! I'm being rendered at: {this.state.path}</h1>
      </div>
    )
  }
}

export default withRouter(App);

导出组件时，我使用 react-router-v4 的 withRouter() 来封装它。在 componentDidMount 这个生命周期中，我们使用 this.props.location.pathname 来更新我们的 state，由于我们使用了 withRouter 高阶组件，我们可以直接访问 this.props.locationlocation，而不需要直接将 location 作为 props 直接传入，非常方便。

Render callbacks

与高阶组件类似，render callbacks 或 render props 可以用来重用逻辑。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  increment = () => {
    this.setState(prevState => {
      return {
        count: prevState.count + 1,
      };
    });
  };

  render() {
    return (
      <div onClick={this.increment}>{this.props.children(this.state)}</div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <Counter>
        {state => (
          <div>
            <h1>The count is: {state.count}</h1>
          </div>
        )}
      </Counter>
    );
  }
}

在 Counter 类中，我们 render 中嵌入 this.props.childrn 并将 this.state 作为参数。在 App 类下面，我们可以将我们组件包装在 Counter 组件中。

Counter 组件的本质是暴露了 children 这个外部属性，将 children 具体的渲染细节交个 Counter 的使用者，使用的时候只需要将组件传入到 Counter 的 children 中，当然可以使用其他参数，如果 children 不够的话。例如实现一个聊天列表每条消息有头像和消息内容，具体头像是圆是方，具体消息内容是文字是图片，都交给了外部使用者。

原文：React component patterns

猜你喜欢