解锁 React 组件化新姿式 - react-call-return

最先的时候，antd 的 Table 用起来是这样的：

const columns = [
  { dataIndex: 'name', title: 'Name' },
  { dataIndex: 'age', title: 'Age' },
  { dataIndex: 'address', title: 'Address' }
]

<Table columns={columns} data={data} />

只要把列定义和数据传给 Table 组件，它就会帮你把表格渲染出来。咱们简单实现一下上面的 Table 组件：

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

    return (
      <table>
        <thead>
          <tr>
            {columns.map(col =>
              <th key={col.dataIndex}>{col.title}</th>
            )}
          </tr>
        </thead>
        <tbody>
          {data.map(item => (
            <tr key={item.id}>
              {columns.map(col =>
                <td key={col.dataIndex}>{item[col.dataIndex]}</td>
              )}
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

后来，有人就以为这样写不够 React 啊，我想要用 JSX 来定义列啊。

好吧，那咱们把上面的 Table 改造一下，容许用 JSX 的方式。

const Column = () => {};

class Table extends React.Component {
  static Column = Column;

  render() {
    const { children, columns, data } = this.props;

    this.columns = columns || React.Children.map(children, (child) => ({
      dataIndex: child.props.dataIndex,
      title: child.props.title,
    }))

    return (
      <table>
        <thead>
          <tr>
            {this.columns.map(col =>
              <th key={col.dataIndex}>{col.title}</th>
            )}
          </tr>
        </thead>
        <tbody>
          {data.map(item => (
            <tr key={item.id}>
              {this.columns.map(col =>
                <td key={col.dataIndex}>{item[col.dataIndex]}</td>
              )}
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

这里咱们定义了一个什么都不干的 Column 组件，而后 Table 组件经过遍历本身的子元素来把列信息读出来。这样就实现 issue 里要求的功能，很是简单。

但是，过了段时间，又有人不满意了。

既然如今支持 JSX 的方式定义列了，那我就想封装本身的 XxxColumn 组件啊。可是从咱们上面的实现能够看到，Table 是直接从本身的子元素上读取列信息的，如今若是 Column 组件被封装起来，咱们就读不到 Column 上的信息了。

这个问题，一直没有很好的解法。可是，就在昨天，随着 React 16.1 的发布，React Team 还发布了两个实验性的包 react-reconciler 和 react-call-return。其中 react-reconciler 用来实现自定义的 renderer，此处暂且不表。而 react-call-return 这个初看名字彻底不知道什么东西的包，就能够解决上面的问题。

react-call-return 提供了两个方法 unstable_createReturn 和 unstable_createCall。

咱们先来用这两个方法从新实现一下上面的 Table 组件，再来看咱们的问题是怎么被解决的。

const Column = (props) => unstable_createReturn(props);

class Table extends React.Component {
  static Column = Column;

  render() {
    const { children, data } = this.props;

    return (
      <table>
        <thead>
          <tr>
            {unstable_createCall(children, (props, columns) => (
              columns.map(col => (
                <th key={col.dataIndex}>{col.title}</th>
              ))
            ), this.props)}
          </tr>
        </thead>
        <tbody>
          {data.map(item => (
            <tr key={item.id}>
              {unstable_createCall(children, (props, columns) => (
                columns.map(col => (
                  <td key={col.dataIndex}>{item[col.dataIndex]}</td>
                ))
              ), this.props)}
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

能够看到，Column 组件再也不什么都不作了，它用 unstable_createReturn 建立了一个 return，return 的内容，就是它本身的 props。而后咱们在 Table 里调用 unstable_createCall， 这个方法的第一个参数是 Table 的子元素，第二个参数是一个 handler 方法，，第三个参数是 Table 的 props。由于 Table 的子元素，也就是 Column 返回了一个 return，因此当咱们 call 这些 return 的时候，React 会把 Column return 的结果传给咱们的 handler 方法，大概就是这个过程 handler(props, children.map((c => c.call() )))。这样咱们就拿到了 Column 上的 props ，即便 Column 被封装起来了也不会有问题。

react-call-return 的出现，让咱们在组件设计上有了更多的可能性，JSX 再也不须要映射 DOM，而是能够直接来表达数据。

以上全部演示代码，能够在这里找到 https://github.com/yesmeck/neotable