JavaScript 的内容远多于 React

总之，React 中可以充分利用大量的 JavaScript 功能。尽管 React 的 API 表面面积很小，但开发者必须熟悉 JavaScript 所提供的全部功能。正因如此，常说：“成为一名 React 开发者会让你成为更优秀的 JavaScript 开发者”。让我们通过重构一个高阶组件来回顾一下在 React 中学到的 JavaScript 相关知识。

1function withLoading(Component) {
2  return class WithLoading extends React.Component {
3    render() {
4      const { isLoading, ...props } = this.props;
5
6      if (isLoading) {
7        return <p>Loading</p>;
8      }
9
10      return <Component { ...props } />;
11    }
12  };
13}

这个高阶组件的作用是在 isLoading 属性为 true 时显示一个条件加载指示器，否则渲染传入的组件。你已经可以看到（剩余）解构和展开运算符的实际应用。后者体现在渲染的组件上，因为 props 对象中所有剩余的属性都会被传递给该组件。

为了让高阶组件更加简洁，第一步是将返回的 React 类组件重构为无状态函数组件：

1function withLoading(Component) {
2  return function ({ isLoading, ...props }) {
3    if (isLoading) {
4      return <p>Loading</p>;
5    }
6
7    return <Component { ...props } />;
8  };
9}

可以看到，剩余解构同样可以用于函数参数列表。接下来，使用 ES6 箭头函数可以让代码进一步简化：

1const withLoading = Component => ({ isLoading, ...props }) => {
2  if (isLoading) {
3    return <p>Loading</p>;
4  }
5
6  return <Component { ...props } />;
7}

再结合三元运算符，函数体可以压缩为一行代码，因此可以省略大括号和 return 语句。

1const withLoading = Component => ({ isLoading, ...props }) =>
2  isLoading
3    ? <p>Loading</p>
4    : <Component { ...props } />

如你所见，这个高阶组件使用了多种 JavaScript 技术，而这些技术与 React 本身无关：箭头函数、高阶函数、三元运算符、解构赋值和展开运算符。这正是 JavaScript 功能在 React 应用中得以发挥的方式。

总结：

人们常说学习 React 的入门曲线很陡峭。但如果只把 React 单独拿出来看，并忽略其中的 JavaScript 部分，其实并没有那么难。React 并没有像其他 Web 框架那样引入额外的抽象层。相反，它要求你直接使用 JavaScript。因此，不断提升你的 JavaScript 技能，你就能成为一名出色的 React 开发者。