（译）React 组件设计模式基础

正文

请到「今天看啥」查看全文

const UserList = props =>
  <ul>
    {props.users.map(u => (
      <li>{u.name} - {u.age} years old</li>
    ))}
  </ul>

而这个 展示 组件可以被一个 容器 组件更新：

class UserListContainer extends React.Component {
  constructor() {
    super()
    this.state = { users: [] }
  }

  componentDidMount() {
    fetchUsers(users => this.setState({ users }));
  }

  render() {
    return <UserList users={this.state.users} />
  }
}

通过将组件区分为 容器 组件与 展示 组件，将数据获取与渲染进行分离。这也使 UserList 可复用。如果你想了解更多，这里有一些 非常好的文章 ，解释地非常清楚。

高阶(Higher-Order)组件

当你想复用一个组件的逻辑时，高阶组件(HOC)就派上用场了。高阶组件就是 JavaScript 函数，接收 React 组件作为参数，并返回一个新组件。

举个例子：编写一个菜单组件，当点击一个菜单项时，展开当前菜单项，显示子菜单。当然我们可以在父组件里来控制此菜单组件的状态，但是更优雅的方式，是使用高阶组件：

function makeToggleable(Clickable) {
  return class extends React.Component {
    constructor() {
      super();
      this.toggle = this.toggle.bind(this);
      this.state = { show: false };
    }

    toggle() {
      this.setState({ show: !this.state.show });
    }

    render() {
      return (
        <div>
          <Clickable
            {...this.props}
            onClick

请到「今天看啥」查看全文