解锁 React 组件化新姿势

最早的时候，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,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

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

相关文章