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

前端之家收集整理的这篇文章主要介绍了解锁 React 组件化新姿势 - react-call-return前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最早的时候,antd 的 Table 用起来是这样的:

  1. const columns = [
  2. { dataIndex: 'name',title: 'Name' },{ dataIndex: 'age',title: 'Age' },{ dataIndex: 'address',title: 'Address' }
  3. ]
  4.  
  5. <Table columns={columns} data={data} />

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

  1. class Table extends React.Component {
  2. render() {
  3. const { columns,data } = this.props;
  4.  
  5. return (
  6. <table>
  7. <thead>
  8. <tr>
  9. {columns.map(col =>
  10. <th key={col.dataIndex}>{col.title}</th>
  11. )}
  12. </tr>
  13. </thead>
  14. <tbody>
  15. {data.map(item => (
  16. <tr key={item.id}>
  17. {columns.map(col =>
  18. <td key={col.dataIndex}>{item[col.dataIndex]}</td>
  19. )}
  20. </tr>
  21. ))}
  22. </tbody>
  23. </table>
  24. );
  25. }
  26. }

后来,有人就觉得这样写不够 React 啊,我想要用 JSX 来定义列啊。

好吧,那我们把上面的 Table 改造一下,允许用 JSX 的方式。

  1. const Column = () => {};
  2.  
  3. class Table extends React.Component {
  4. static Column = Column;
  5.  
  6. render() {
  7. const { children,columns,data } = this.props;
  8.  
  9. this.columns = columns || React.Children.map(children,(child) => ({
  10. dataIndex: child.props.dataIndex,title: child.props.title,}))
  11.  
  12. return (
  13. <table>
  14. <thead>
  15. <tr>
  16. {this.columns.map(col =>
  17. <th key={col.dataIndex}>{col.title}</th>
  18. )}
  19. </tr>
  20. </thead>
  21. <tbody>
  22. {data.map(item => (
  23. <tr key={item.id}>
  24. {this.columns.map(col =>
  25. <td key={col.dataIndex}>{item[col.dataIndex]}</td>
  26. )}
  27. </tr>
  28. ))}
  29. </tbody>
  30. </table>
  31. );
  32. }
  33. }

这里我们定义了一个什么都不干的 Column 组件,然后 Table 组件通过遍历自己的子元素来把列信息读出来。这样就实现 issue 里要求的功能,非常简单。

可是,过了段时间,又有人不满意了。

既然现在支持 JSX 的方式定义列了,那我就想封装自己的 XxxColumn 组件啊。但是从我们上面的实现可以看到,Table 是直接从自己的子元素上读取列信息的,现在如果 Column 组件被封装起来,我们就读不到 Column 上的信息了。

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

react-call-return 提供了两个方法 unstable_createReturnunstable_createCall

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

  1. const Column = (props) => unstable_createReturn(props);
  2.  
  3. class Table extends React.Component {
  4. static Column = Column;
  5.  
  6. render() {
  7. const { children,data } = this.props;
  8.  
  9. return (
  10. <table>
  11. <thead>
  12. <tr>
  13. {unstable_createCall(children,(props,columns) => (
  14. columns.map(col => (
  15. <th key={col.dataIndex}>{col.title}</th>
  16. ))
  17. ),this.props)}
  18. </tr>
  19. </thead>
  20. <tbody>
  21. {data.map(item => (
  22. <tr key={item.id}>
  23. {unstable_createCall(children,columns) => (
  24. columns.map(col => (
  25. <td key={col.dataIndex}>{item[col.dataIndex]}</td>
  26. ))
  27. ),this.props)}
  28. </tr>
  29. ))}
  30. </tbody>
  31. </table>
  32. );
  33. }
  34. }

可以看到,Column 组件不再什么都不做了,它用 unstable_createReturn 创建了一个 return,return 的内容,就是它自己的 props。然后我们在 Table调用 unstable_createCall, 这个方法的第一个参数是 Table 的子元素,第二个参数是一个 handler 方法,,第三个参数是 Tableprops。因为 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相关文章