高级React组件

本章将重点介绍高级 React 组件的实现。我们将了解什么是高阶组件以及如何实现它们。此外，我们还将深入探讨 React 中更高级的主题，并用它实现复杂的交互功能。

引用DOM元素

有时我们需要在 React 中与 DOM 节点进行交互。ref属性可以让我们访问元素中的一个节点。通常，访问 DOM 节点是 React 中的一种反模式，因为我们应该遵循它的声明式编程和单向数据流。当我们引入第一个搜索输入组件时，就已经了解这些了。但是在某些情况下，我们仍然需要访问 DOM 节点。官方文档提到了三种情况：

  • 使用 DOM API（focus事件，媒体播放等）
  • 调用命令式 DOM 节点动画
  • 与需要 DOM 节点的第三方库集成（例如 D3.JavaScript）

让我们通过 Search 组件这个例子看一下。当应用程序第一次渲染时，input 字段应该被聚焦。这是需要访问 DOM API 的一种用例。本章将展示渲染时聚焦 input 字段是如何工作的，但由于这个功能对于应用程序并不是很有用，所以我们将在本章之后省略这些更改。尽管如此，你仍然可以为自己的应用程序保留它。

通常，无状态组件和 ES6 类组件中都可以使用 ref 属性。在聚焦 input 字段的用例中，我们就需要一个生命周期方法。这就是为什么接下来会先在 ES6 类组件中展示如何使用 ref 属性。

第一步是将无状态组件重构为 ES6 类组件。

{title=”src/App.js”,lang=javascript}

  1. # leanpub-start-insert
  2. class Search extends Component {
  3.   render() {
  4.     const {
  5.       value,
  6.       onChange,
  7.       onSubmit,
  8.       children
  9.     } = this.props;
  11.     return (
  12. # leanpub-end-insert
  13.       <form onSubmit={onSubmit}>
  14.         <input
  15.           type="text"
  16.           value={value}
  17.           onChange={onChange}
  18.         />
  19.         <button type="submit">
  20.           {children}
  21.         </button>
  22.       </form>
  23. # leanpub-start-insert
  24.     );
  25.   }
  26. }
  27. # leanpub-end-insert

ES6 类组件的this对象可以帮助我们通过ref属性引用 DOM 节点。

{title=”src/App.js”,lang=javascript}

  1. class Search extends Component {
  2.   render() {
  3.     const {
  4.       value,
  5.       onChange,
  6.       onSubmit,
  7.       children
  8.     } = this.props;
  10.     return (
  11.       <form onSubmit={onSubmit}>
  12.         <input
  13.           type="text"
  14.           value={value}
  15.           onChange={onChange}
  16. # leanpub-start-insert
  17.           ref={(node) => { this.input = node; }}
  18. # leanpub-end-insert
  19.         />
  20.         <button type="submit">
  21.           {children}
  22.         </button>
  23.       </form>
  24.     );
  25.   }
  26. }

现在，你可以通过使用 this 对象、适当的生命周期方法和 DOM API 在组件挂载的时候来聚焦 input 字段。

{title=”src/App.js”,lang=javascript}

  1. class Search extends Component {
  2. # leanpub-start-insert
  3.   componentDidMount() {
  4.     if(this.input) {
  5.       this.input.focus();
  6.     }
  7.   }
  8. # leanpub-end-insert
  10.   render() {
  11.     const {
  12.       value,
  13.       onChange,
  14.       onSubmit,
  15.       children
  16.     } = this.props;
  18.     return (
  19.       <form onSubmit={onSubmit}>
  20.         <input
  21.           type="text"
  22.           value={value}
  23.           onChange={onChange}
  24.           ref={(node) => { this.input = node; }}
  25.         />
  26.         <button type="submit">
  27.           {children}
  28.         </button>
  29.       </form>
  30.     );
  31.   }
  32. }

当应用程序渲染时，input 字段应该被聚焦。这就是ref属性的基本用法。

但是我们怎样在没有this对象的无状态组件中访问ref属性呢？接下来我们在无状态组件中演示。

{title=”src/App.js”,lang=javascript}

  1. const Search = ({
  2.   value,
  3.   onChange,
  4.   onSubmit,
  5.   children
  6. }) => {
  7. # leanpub-start-insert
  8.   let input;
  9. # leanpub-end-insert
  10.   return (
  11.     <form onSubmit={onSubmit}>
  12.       <input
  13.         type="text"
  14.         value={value}
  15.         onChange={onChange}
  16. # leanpub-start-insert
  17.         ref={(node) => input = node}
  18. # leanpub-end-insert
  19.       />
  20.       <button type="submit">
  21.         {children}
  22.       </button>
  23.     </form>
  24.   );
  25. }

现在我们能够访问 input DOM 元素。由于在无状态组件中，没有生命周期方法去触发聚焦事件，这个功能对于聚焦 input 字段这个用例而言没什么用。但是在将来，你可能会遇到其他一些合适的需要在无状态组件中使用ref属性的情况。

练习

加载 ……

现在让我们回到应用程序。当向 Hacker News API 发起搜索请求时，我们想要显示一个加载指示符。

请求是异步的，此时应该向用户展示某些事情即将发生的某种反馈。让我们在 src／App.js 中定义一个可重用的 Loading 组件。

{title=”src/App.js”,lang=javascript}

  1. const Loading = () =>
  2.   <div>Loading ...</div>

现在我们需要存储加载状态 (isLoading)。根据加载状态 (isLoading)，决定是否显示 Loading 组件。

{title=”src/App.js”,lang=javascript}

  1. class App extends Component {
  3.   constructor(props) {
  4.     super(props);
  6.     this.state = {
  7.       results: null,
  8.       searchKey: '',
  9.       searchTerm: DEFAULT_QUERY,
  10.       error: null,
  11. # leanpub-start-insert
  12.       isLoading: false,
  13. # leanpub-end-insert
  14.     };
  16.     ...
  17.   }
  19.   ...
  21. }

isLoading 的初始值是 false。在 App 组件挂载完成之前，无需加载任何东西。

当发起请求时，将加载状态 (isLoading) 设置为 true。最终，请求会成功，那时可以将加载状态 (isLoading) 设置为 false。

{title=”src/App.js”,lang=javascript}

  1. class App extends Component {
  3.   ...
  5.   setSearchTopStories(result) {
  6.     ...
  8.     this.setState({
  9.       results: {
  10.         ...results,
  11.         [searchKey]: { hits: updatedHits, page }
  12.       },
  13. # leanpub-start-insert
  14.       isLoading: false
  15. # leanpub-end-insert
  16.     });
  17.   }
  19.   fetchSearchTopStories(searchTerm, page = 0) {
  20. # leanpub-start-insert
  21.     this.setState({ isLoading: true });
  22. # leanpub-end-insert
  24.     fetch(`${PATH_BASE}${PATH_SEARCH}?${PARAM_SEARCH}${searchTerm}&${PARAM_PAGE}${page}&${PARAM_HPP}${DEFAULT_HPP}`)
  25.       .then(response => response.json())
  26.       .then(result => this.setSearchTopStories(result))
  27.       .catch(e => this.setState({ error: e }));
  28.   }
  30.   ...
  32. }

最后一步，我们将在应用程序中使用 Loading 组件。基于加载状态 (isLoading) 的条件来决定渲染 Loading 组件或 Button 组件。后者为一个用于获取更多数据的按钮。

{title=”src/App.js”,lang=javascript}

  1. class App extends Component {
  3.   ...
  5.   render() {
  6.     const {
  7.       searchTerm,
  8.       results,
  9.       searchKey,
  10.       error,
  11. # leanpub-start-insert
  12.       isLoading
  13. # leanpub-end-insert
  14.     } = this.state;
  16.     ...
  18.     return (
  19.       <div className="page">
  20.         ...
  21.         <div className="interactions">
  22. # leanpub-start-insert
  23.           { isLoading
  24.             ? <Loading />
  25.             : <Button
  26.               onClick={() => this.fetchSearchTopStories(searchKey, page + 1)}>
  27.               More
  28.             </Button>
  29.           }
  30. # leanpub-end-insert
  31.         </div>
  32.       </div>
  33.     );
  34.   }
  35. }

由于我们在componentDidMount（）中发起请求，Loading 组件会在应用程序启动的时候显示。此时，因为列表是空的，所以不显示 Table 组件。当响应数据从 Hacker News API 返回时，返回的数据会通过 Table 组件显示出来，加载状态 (isLoading) 设置为 false，然后 Loading 组件消失。同时，出现了可以获取更多的数据的“More”按钮。一旦点击按钮，获取更多的数据，该按钮将消失，加载组件会重新出现。

练习:

  • 使用第三方库，比如Font Awesome，来显示加载图标，而不是“Loading …”文本

高阶组件

高阶组件（HOC）是 React 中的一个高级概念。HOC 与高阶函数是等价的。它接受任何输入 - 多数时候是一个组件，也可以是可选参数 - 并返回一个组件作为输出。返回的组件是输入组件的增强版本，并且可以在JSX中使用。

HOC可用于不同的情况，比如：准备属性，管理状态或更改组件的表示形式。其中一种情况是将 HOC 用于帮助实现条件渲染。想象一下现在有一个 List 组件，由于列表可以为空或无，那么它可以渲染一个列表或者什么也不渲染。当没有列表的时候，HOC 可以屏蔽掉这个不显示任何内容的列表。另一方面，这个简单的 List 组件不再需要关心列表存不存在，它只关心渲染列表。

我们接下来创建一个简单的 HOC，它将一个组件作为输入并返回一个组件。我们可以把它放在 src / App.js 文件中。

{title=”src/App.js”,lang=javascript}

  1. function withFoo(Component) {
  2.   return function(props) {
  3.     return <Component { ...props } />;
  4.   }
  5. }

有一个惯例是用 “with” 前缀来命名 HOC。由于我们现在使用的是 ES6，因此可以使用 ES6 箭头函数更简洁地表达 HOC。

{title=”src/App.js”,lang=javascript}

  1. const withFoo = (Component) => (props) =>
  2.   <Component { ...props } />

在这个例子中，没有做任何改变，输入组件将和输出组件一样。它渲染与输入组件相同的实例，并将所有的属性(props)传递给输出组件，但是这个 HOC 没意义。我们来增强输出组件功能：当加载状态 (isLoading) 为 true 时，组件显示 Loading 组件，否则显示输入的组件。条件渲染是 HOC 的一种绝佳用例。

{title=”src/App.js”,lang=javascript}

  1. # leanpub-start-insert
  2. const withLoading = (Component) => (props) =>
  3.   props.isLoading
  4.     ? <Loading />
  5.     : <Component { ...props } />
  6. # leanpub-end-insert

基于加载属性 (isLoading)，我们可以实现条件渲染。该函数将返回 Loading 组件或输入的组件。

一般来说，将对象展开然后作为一个组件的输入是非常高效的（比如说前面那个例子中的 props 对象）。请参阅下面的代码片段中的区别。

{title=”Code Playground”,lang=”javascript”}

  1. // before you would have to destructure the props before passing them
  2. const { foo, bar } = props;
  3. <SomeComponent foo={foo} bar={bar} />
  5. // but you can use the object spread operator to pass all object properties
  6. <SomeComponent { ...props } />

有一点应该避免。我们把包括isLoading属性在内的所有 props 通过展开对象传递给输入的组件。

然而，输入的组件可能不关心isLoading属性。我们可以使用 ES6 中的 rest 解构来避免它。

{title=”src/App.js”,lang=javascript}

  1. # leanpub-start-insert
  2. const withLoading = (Component) => ({ isLoading, ...rest }) =>
  3.   isLoading
  4.     ? <Loading />
  5.     : <Component { ...rest } />
  6. # leanpub-end-insert

这段代码从 props 对象中取出一个属性，并保留剩下的属性。这也适用于多个属性。你可能已经在 解构赋值中了解过它。

现在，我们已在 JSX 中使用 HOC。应用程序中的用例可能是显示 “More” 按钮或 Loading 组件。

Loading 组件已经封装在 HOC 中，缺失了输入组件。在显示 Button 组件或 Loading 组件的用例中，Button 是 HOC 的输入组件。增强的输出组件是一个 ButtonWithLoading 的组件。

{title=”src/App.js”,lang=javascript}

  1. const Button = ({ onClick, className = '', children }) =>
  2.   <button
  3.     onClick={onClick}
  4.     className={className}
  5.     type="button"
  6.   >
  7.     {children}
  8.   </button>
  10. const Loading = () =>
  11.   <div>Loading ...</div>
  13. const withLoading = (Component) => ({ isLoading, ...rest }) =>
  14.   isLoading
  15.     ? <Loading />
  16.     : <Component { ...rest } />
  18. # leanpub-start-insert
  19. const ButtonWithLoading = withLoading(Button);
  20. # leanpub-end-insert

现在所有的东西已经被定义好了。最后一步，就是使用 ButtonWithLoading 组件，它接收加载状态 (isLoading) 作为附加属性。当 HOC 消费加载属性 (isLoading) 时，再将所有其他 props 传递给 Button 组件。

{title=”src/App.js”,lang=javascript}

  1. class App extends Component {
  3.   ...
  5.   render() {
  6.     ...
  7.     return (
  8.       <div className="page">
  9.         ...
  10.         <div className="interactions">
  11. # leanpub-start-insert
  12.           <ButtonWithLoading
  13.             isLoading={isLoading}
  14.             onClick={() => this.fetchSearchTopStories(searchKey, page + 1)}>
  15.             More
  16.           </ButtonWithLoading>
  17. # leanpub-end-insert
  18.         </div>
  19.       </div>
  20.     );
  21.   }
  22. }

当再次运行测试时，App 组件的快照测试会失败。执行 diff 在命令行可能显示如下：

{title=”Command Line”,lang=”text”}

  1. -    <button
  2. -      className=""
  3. -      onClick={[Function]}
  4. -      type="button"
  5. -    >
  6. -      More
  7. -    </button>
  8. +    <div>
  9. +      Loading ...
  10. +    </div>

如果你认为是 App 组件有问题，现在可以选择修复该组件，或者选择接受 App 组件的新快照。因为本章介绍了 Loading 组件，我们可以在交互测试的命令行中接受已经更改的快照测试。

高阶组件是 React 中的高级技术。它可以使组件具有更高的重用性，更好的抽象性，更强的组合性，以及提升对 props，state 和视图的可操作性。如果不能马上理解，别担心。我们需要时间去熟悉它。

我们推荐阅读高阶组件的简单介绍。这篇文章介绍了另一种学习高阶组件的方法，展示了如何用函数式的方式定义高阶组件并优雅的使用它，以及使用高阶组件解决条件渲染的问题。

练习:

  • 阅读 高阶组件的简单介绍
  • 使用创建的高阶组件
  • 思考一个适合使用高阶组件的场景
    • 如果想到了使用场景，请实现这个高阶组件

高级排序

我们已经实现了客户端和服务器端搜索交互。因为我们已经拥了 Table 组件，所以增强 Table 组件的交互性是有意义的。那接下来，我们为 Table 组件加入根据列标题进行排序的功能如何？

你自己写一个排序函数，但是一般这种情况，我个人更喜欢使用第三方工具库。lodash就是这些工具库之一，当然你也可以选择适用于你的任何第三方库。让我们安装 lodash 并使用。

{title=”Command Line”,lang=”text”}

  1. npm install lodash

现在我们可以在 src/App 文件中导入lodash的sort方法。

{title=”src/App.js”,lang=javascript}

  1. import React, { Component } from 'react';
  2. import fetch from 'isomorphic-fetch';
  3. # leanpub-start-insert
  4. import { sortBy } from 'lodash';
  5. # leanpub-end-insert
  6. import './App.css';

Table 组件中有好几列，分别是标题，作者，评论和评分。你可以定义排序函数，而每个函数接受一个列表并返回按照指定属性排序过的列表。此外，我们还需要一个默认的排序函数，该函数不做排序而只是用于返回未排序的列表。这将作为组件的初始状态。

{title=”src/App.js”,lang=javascript}

  1. ...
  3. # leanpub-start-insert
  4. const SORTS = {
  5.   NONE: list => list,
  6.   TITLE: list => sortBy(list, 'title'),
  7.   AUTHOR: list => sortBy(list, 'author'),
  8.   COMMENTS: list => sortBy(list, 'num_comments').reverse(),
  9.   POINTS: list => sortBy(list, 'points').reverse(),
  10. };
  11. # leanpub-end-insert
  13. class App extends Component {
  14.   ...
  15. }
  16. ...

可以看到有两个排序函数返回一个反向列表。这是因为当用户首次点击排序的时候，希望查看评论和评分最高的项目，而不是最低的。

现在，SORTS 对象允许你引用任何排序函数。

我们的 App 组件负责存储排序函数的状态。组件的初始状态存储的是默认排序函数，它不对列表排序而只是将输入的list作为输出。

{title=”src/App.js”,lang=javascript}

  1. this.state = {
  2.   results: null,
  3.   searchKey: '',
  4.   searchTerm: DEFAULT_QUERY,
  5.   error: null,
  6.   isLoading: false,
  7. # leanpub-start-insert
  8.   sortKey: 'NONE',
  9. # leanpub-end-insert
  10. };

一旦用户选择了一个不同的sortKey，比如说 AUTHOR，App组件将从SORTS对象中选取合适的排序函数对列表进行排序。

现在，我们要在App组件中定义一个新的类方法，用来将sortKey设置为App组件的状态。然后，sortKey 可以被用来选取对应的排序函数并对其列表进行排序。

{title=”src/App.js”,lang=javascript}

  1. class App extends Component {
  3.   constructor(props) {
  5.     ...
  7.     this.needsToSearchTopStories = this.needsToSearchTopStories.bind(this);
  8.     this.setSearchTopStories = this.setSearchTopStories.bind(this);
  9.     this.fetchSearchTopStories = this.fetchSearchTopStories.bind(this);
  10.     this.onSearchSubmit = this.onSearchSubmit.bind(this);
  11.     this.onSearchChange = this.onSearchChange.bind(this);
  12.     this.onDismiss = this.onDismiss.bind(this);
  13. # leanpub-start-insert
  14.     this.onSort = this.onSort.bind(this);
  15. # leanpub-end-insert
  16.   }
  18. # leanpub-start-insert
  19.   onSort(sortKey) {
  20.     this.setState({ sortKey });
  21.   }
  22. # leanpub-end-insert
  24.   ...
  26. }

下一步是将类方法和sortKey传递给 Table 组件。

{title=”src/App.js”,lang=javascript}

  1. class App extends Component {
  3.   ...
  5.   render() {
  6.     const {
  7.       searchTerm,
  8.       results,
  9.       searchKey,
  10.       error,
  11.       isLoading,
  12. # leanpub-start-insert
  13.       sortKey
  14. # leanpub-end-insert
  15.     } = this.state;
  17.     ...
  19.     return (
  20.       <div className="page">
  21.         ...
  22.         <Table
  23.           list={list}
  24. # leanpub-start-insert
  25.           sortKey={sortKey}
  26.           onSort={this.onSort}
  27. # leanpub-end-insert
  28.           onDismiss={this.onDismiss}
  29.         />
  30.         ...
  31.       </div>
  32.     );
  33.   }
  34. }

Table 组件负责对列表排序。它通过sortKey选取SORT对象中对应的排序函数，并列表作为该函数的输入。之后，Table 组件将在已排序的列表上继续 mapping。

{title=”src/App.js”,lang=javascript}

  1. # leanpub-start-insert
  2. const Table = ({
  3.   list,
  4.   sortKey,
  5.   onSort,
  6.   onDismiss
  7. }) =>
  8. # leanpub-end-insert
  9.   <div className="table">
  10. # leanpub-start-insert
  11.     {SORTS[sortKey](list).map(item =>
  12. # leanpub-end-insert
  13.       <div key={item.objectID} className="table-row">
  14.         ...
  15.       </div>
  16.     )}
  17.   </div>

理论上，列表可以按照其中的任意排序函数进行排序，但是默认的排序 (sortKey) 是NONE，所以列表不进行排序。至此，还没有人执行onSort()方法来改变sortKey。让我们接下来用一行列标题来扩展表格，每个列标题会使用列中的 Sort 组件对每列进行排序。

{title=”src/App.js”,lang=javascript}

  1. const Table = ({
  2.   list,
  3.   sortKey,
  4.   onSort,
  5.   onDismiss
  6. }) =>
  7.   <div className="table">
  8. # leanpub-start-insert
  9.     <div className="table-header">
  10.       <span style={{ width: '40%' }}>
  11.         <Sort
  12.           sortKey={'TITLE'}
  13.           onSort={onSort}
  14.         >
  15.           Title
  16.         </Sort>
  17.       </span>
  18.       <span style={{ width: '30%' }}>
  19.         <Sort
  20.           sortKey={'AUTHOR'}
  21.           onSort={onSort}
  22.         >
  23.           Author
  24.         </Sort>
  25.       </span>
  26.       <span style={{ width: '10%' }}>
  27.         <Sort
  28.           sortKey={'COMMENTS'}
  29.           onSort={onSort}
  30.         >
  31.           Comments
  32.         </Sort>
  33.       </span>
  34.       <span style={{ width: '10%' }}>
  35.         <Sort
  36.           sortKey={'POINTS'}
  37.           onSort={onSort}
  38.         >
  39.           Points
  40.         </Sort>
  41.       </span>
  42.       <span style={{ width: '10%' }}>
  43.         Archive
  44.       </span>
  45.     </div>
  46. # leanpub-end-insert
  47.     {SORTS[sortKey](list).map(item =>
  48.       ...
  49.     )}
  50.   </div>

每个 Sort 组件都有一个指定的sortKey和通用的onSort（）函数。Sort 组件调用onSort()方法去设置指定的sortKey。

{title=”src/App.js”,lang=javascript}

  1. const Sort = ({ sortKey, onSort, children }) =>
  2.   <Button onClick={() => onSort(sortKey)}>
  3.     {children}
  4.   </Button>

如你所见，Sort 组件重用了我们的 Button 组件，当点击按钮时，每个传入的sortKey都会被onSort（）方法设置。现在，我们应该能够通过点击列标题来对列表进行排序了。

这里有个改善外观的小建议。到目前为止，列标题中的按钮看起来有点傻。我们给 Sort 组件中的按钮添加一个合适的className。

{title=”src/App.js”,lang=javascript}

  1. const Sort = ({ sortKey, onSort, children }) =>
  2. # leanpub-start-insert
  3.   <Button
  4.     onClick={() => onSort(sortKey)}
  5.     className="button-inline"
  6.   >
  7. # leanpub-end-insert
  8.     {children}
  9.   </Button>

现在应该看起来不错。接下来的目标是实现反向排序。如果点击 Sort 组件两次，该列表应该被反向排序。首先，我们需要用一个布尔值来定义反向状态 (isSortReverse)。排序可以反向或不反向。

{title=”src/App.js”,lang=javascript}

  1. this.state = {
  2.   results: null,
  3.   searchKey: '',
  4.   searchTerm: DEFAULT_QUERY,
  5.   error: null,
  6.   isLoading: false,
  7.   sortKey: 'NONE',
  8. # leanpub-start-insert
  9.   isSortReverse: false,
  10. # leanpub-end-insert
  11. };

现在在排序方法中，可以评判列表是否被反向排序。如果状态中的 sortKey 与传入的 sortKey 相同，并且反向状态 (isSortReverse) 尚未设置为 true，则相反——反向状态 (isSortReverse) 设置为 true。

{title=”src/App.js”,lang=javascript}

  1. onSort(sortKey) {
  2. # leanpub-start-insert
  3.   const isSortReverse = this.state.sortKey === sortKey && !this.state.isSortReverse;
  4.   this.setState({ sortKey, isSortReverse });
  5. # leanpub-end-insert
  6. }

同样，将反向属性 (isSortReverse) 传递给 Table 组件。

{title=”src/App.js”,lang=javascript}

  1. class App extends Component {
  3.   ...
  5.   render() {
  6.     const {
  7.       searchTerm,
  8.       results,
  9.       searchKey,
  10.       error,
  11.       isLoading,
  12.       sortKey,
  13. # leanpub-start-insert
  14.       isSortReverse
  15. # leanpub-end-insert
  16.     } = this.state;
  18.     ...
  20.     return (
  21.       <div className="page">
  22.         ...
  23.         <Table
  24.           list={list}
  25.           sortKey={sortKey}
  26. # leanpub-start-insert
  27.           isSortReverse={isSortReverse}
  28. # leanpub-end-insert
  29.           onSort={this.onSort}
  30.           onDismiss={this.onDismiss}
  31.         />
  32.         ...
  33.       </div>
  34.     );
  35.   }
  36. }

现在 Table 组件有一个块体箭头函数用于计算数据。

{title=”src/App.js”,lang=javascript}

  1. # leanpub-start-insert
  2. const Table = ({
  3.   list,
  4.   sortKey,
  5.   isSortReverse,
  6.   onSort,
  7.   onDismiss
  8. }) => {
  9.   const sortedList = SORTS[sortKey](list);
  10.   const reverseSortedList = isSortReverse
  11.     ? sortedList.reverse()
  12.     : sortedList;
  14.   return(
  15. # leanpub-end-insert
  16.     <div className="table">
  17.       <div className="table-header">
  18.         ...
  19.       </div>
  20. # leanpub-start-insert
  21.       {reverseSortedList.map(item =>
  22. # leanpub-end-insert
  23.         ...
  24.       )}
  25.     </div>
  26. # leanpub-start-insert
  27.   );
  28. }
  29. # leanpub-end-insert

反向排序现在应该可以工作了。

最后值得一提，为了改善用户体验，我们可以思考一个开放性的问题：用户可以区分当前是根据哪一列进行排序的吗？目前为止，用户是区别不出来的。我们可以给用户一个视觉反馈。

每个 Sort 组件都已经有了其的特定sortKey。它可以用来识别被激活的排序。我们可以将内部组件状态sortKey作为激活排序标识 (activeSortKey) 传递给 Sort 组件。

{title=”src/App.js”,lang=javascript}

  1. const Table = ({
  2.   list,
  3.   sortKey,
  4.   isSortReverse,
  5.   onSort,
  6.   onDismiss
  7. }) => {
  8.   const sortedList = SORTS[sortKey](list);
  9.   const reverseSortedList = isSortReverse
  10.     ? sortedList.reverse()
  11.     : sortedList;
  13.   return(
  14.     <div className="table">
  15.       <div className="table-header">
  16.         <span style={{ width: '40%' }}>
  17.           <Sort
  18.             sortKey={'TITLE'}
  19.             onSort={onSort}
  20. # leanpub-start-insert
  21.             activeSortKey={sortKey}
  22. # leanpub-end-insert
  23.           >
  24.             Title
  25.           </Sort>
  26.         </span>
  27.         <span style={{ width: '30%' }}>
  28.           <Sort
  29.             sortKey={'AUTHOR'}
  30.             onSort={onSort}
  31. # leanpub-start-insert
  32.             activeSortKey={sortKey}
  33. # leanpub-end-insert
  34.           >
  35.             Author
  36.           </Sort>
  37.         </span>
  38.         <span style={{ width: '10%' }}>
  39.           <Sort
  40.             sortKey={'COMMENTS'}
  41.             onSort={onSort}
  42. # leanpub-start-insert
  43.             activeSortKey={sortKey}
  44. # leanpub-end-insert
  45.           >
  46.             Comments
  47.           </Sort>
  48.         </span>
  49.         <span style={{ width: '10%' }}>
  50.           <Sort
  51.             sortKey={'POINTS'}
  52.             onSort={onSort}
  53. # leanpub-start-insert
  54.             activeSortKey={sortKey}
  55. # leanpub-end-insert
  56.           >
  57.             Points
  58.           </Sort>
  59.         </span>
  60.         <span style={{ width: '10%' }}>
  61.           Archive
  62.         </span>
  63.       </div>
  64.       {reverseSortedList.map(item =>
  65.           ...
  66.       )}
  67.     </div>
  68.   );
  69. }

现在在 Sort 组件中，我们可以基于sortKey和activeSortKey得知排序是否被激活。给 Sort 组件增加一个className属性，用于在排序被激活的时候给用户一个视觉反馈。

{title=”src/App.js”,lang=javascript}

  1. # leanpub-start-insert
  2. const Sort = ({
  3.   sortKey,
  4.   activeSortKey,
  5.   onSort,
  6.   children
  7. }) => {
  8.   const sortClass = ['button-inline'];
  10.   if (sortKey === activeSortKey) {
  11.     sortClass.push('button-active');
  12.   }
  14.   return (
  15.     <Button
  16.       onClick={() => onSort(sortKey)}
  17.       className={sortClass.join(' ')}
  18.     >
  19.       {children}
  20.     </Button>
  21.   );
  22. }
  23. # leanpub-end-insert

这样定义sortClass的方法有点蠢，不是吗？有一个库可以让它看起来更优雅。首先，我们需要安装它。

{title=”Command Line”,lang=”text”}

  1. npm install classnames

其次，需要将其导入 src/App.js 文件。

{title=”src/App.js”,lang=javascript}

  1. import React, { Component } from 'react';
  2. import fetch from 'isomorphic-fetch';
  3. import { sortBy } from 'lodash';
  4. # leanpub-start-insert
  5. import classNames from 'classnames';
  6. # leanpub-end-insert
  7. import './App.css';

现在，我们可以通过条件式语句来定义组件的className。

{title=”src/App.js”,lang=javascript}

  1. const Sort = ({
  2.   sortKey,
  3.   activeSortKey,
  4.   onSort,
  5.   children
  6. }) => {
  7. # leanpub-start-insert
  8.   const sortClass = classNames(
  9.     'button-inline',
  10.     { 'button-active': sortKey === activeSortKey }
  11.   );
  12. # leanpub-end-insert
  14.   return (
  15. # leanpub-start-insert
  16.     <Button
  17.       onClick={() => onSort(sortKey)}
  18.       className={sortClass}
  19.     >
  20. # leanpub-end-insert
  21.       {children}
  22.     </Button>
  23.   );
  24. }

同样在运行测试时，我们会看到 Table 组件失败的快照测试，及一些失败的单元测试。由于我们再次更改了组件显示，因此可以选择接受快照测试。但是必须修复单元测试。在我们的 src/App.test.js文件中，需要为 Table 组件提供sortKey和isSortReverse。

{title=”src/App.test.js”,lang=javascript}

  1. ...
  3. describe('Table', () => {
  5.   const props = {
  6.     list: [
  7.       { title: '1', author: '1', num_comments: 1, points: 2, objectID: 'y' },
  8.       { title: '2', author: '2', num_comments: 1, points: 2, objectID: 'z' },
  9.     ],
  10. # leanpub-start-insert
  11.     sortKey: 'TITLE',
  12.     isSortReverse: false,
  13. # leanpub-end-insert
  14.   };
  16.   ...
  18. });

可能需要再一次接受 Table 组件的失败的快照测试，因为我们给 Table 组件提供更多的 props。

现在，我们的高级排序交互完成了。

练习:

  • 使用像Font Awesome这样的库来指示（反向）排序
    • 就是在每个排序标题旁边显示向上箭头或向下箭头图标
  • 阅读了解classnames

{pagebreak}

我们已经学会了React中的高级组件技术！现在来回顾一下本章：

  • React
    • 通过 ref 属性引用 DOM 节点
    • 高阶组件是构建高级组件的常用方法
    • 高级交互在 React 中的实现
    • 帮助实现条件 classNames 的一个优雅库

  • ES6

    • rest 解构拆分对象和数组

    你可以在官方代码库找到源代码。