在我的研讨会时期，更多的材料是关于JavaScript而不是React。个中大部份归结为JavaScript ES6以及功用和语法，但也包含三元运算符，言语中的简写版本，此对象，JavaScript内置函数（map，reduce，filter）或更常识性的观点，如：可组合性，可重用性，稳定性或高阶函数。这些是基本知识，在最先运用React之前你不须要控制这些基本知识，但在进修或实践它时肯定会涌现这些基本知识。

以下练习训练是我尝试为您供应一个险些普遍但简明的列表，个中列出了一切差别的JavaScript功用，以补充您的React应用程序。假如您有任何其他不在列表中的内容，只需对本文宣布批评，我会实时更新。

目次

• 从JavaScript中进修React
• React 和 JavaScript Classes
• React中的箭头函数
• 作为React中的组件的fuuction
• React类组件语法
• 在React中的Map, Reduce 和 Filter
• React中的var，let和const
• React中的三元运算符
• React中的Import 和 Export
• React中的库
• React中的高阶函数
• React中的解构和流传运算符
• There is more JavaScript than React

从JavaScript中进修React

当你进入React的世界时，一般是运用用于启动React项目的 create-react-app。设置项目后，您将碰到以下React类组件：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div>
        <header>
          <img src alt="logo" />
          <h1>Welcome to React</h1>
        </header>
        <p>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

能够说，React类组件能够不是最好的出发点。新手有许多东西须要消化，不一定是React：类语句，类要领和继续。导入语句也只是在进修React时增添了庞杂性。只管主要核心应当是JSX（React的语法），但一般一切的事变都须要诠释。这篇文章应当展现一切的东西，大部份是JavaScript，而没必要忧郁React。

React和JavaScript类

在最先时碰到React类组件，只是须要有关JavaScript类的基本。JavaScript类在言语中是相称新的。之前，只要JavaScript的原型链也能够用于继续。JavaScript类在原型继续之上构建，使悉数事物更简朴。

定义React组件的一种要领是运用JavaScript类。为了明白JavaScript类，您能够花一些时刻在没有React的状况下进修它们。

class Developer {
  constructor(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
  }

  getName() {
    return this.firstname + ' ' + this.lastname;
  }
}

var me = new Developer('Robin', 'Wieruch');

console.log(me.getName());

类形貌了一个实体，该实体用作建立该实体实例的蓝图。一旦运用new语句建立了类的实例，就会挪用该类的构造函数，该实例化该类的实例。因而，类能够具有一般位于其构造函数中的属性。另外，类要领（比方getName（））用于读取（或写入）实例的数据。类的实例在类中示意为此对象，但实例外部仅指定给JavaScript变量。

一般，类用于面向对象编程中的继续。它们在JavaScript中用于雷同的，而extends语句可用于从另一个类继续一个类。具有extends语句的更专业的类继续了更通用类的一切功用，但能够向其增添其专用功用。

class Developer {
  constructor(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
  }

  getName() {
    return this.firstname + ' ' + this.lastname;
  }
}

class ReactDeveloper extends Developer {
  getJob() {
    return 'React Developer';
  }
}

var me = new ReactDeveloper('Robin', 'Wieruch');

console.log(me.getName());
console.log(me.getJob());

基本上，它只须要完整明白React类组件。 JavaScript类用于定义React组件，但正如您所看到的，React组件只是一个React组件，由于它继续了从React包导入的React Component类的一切功用。

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Welcome to React</h1>
      </div>
    );
  }
}

export default App;

这就是为何render（）要领在React类组件中是必需的：来自导入的React包的React组件指导您运用它在浏览器中显现某些内容。另外，假如不从React组件扩大，您将没法运用其他生命周期要领 （包含render（）要领）。比方，不存在componentDidMount（）生命周期要领，由于该组件将是vanilla JavaScript类的实例。而且不仅生命周期要领会消逝，React的API要领（比方用于当地状况治理的this.setState（））也不可用。

然则，正如您所看到的，运用JavaScript类有利于运用您的专业行动扩大通用类。因而，您能够引入本身的类要领或属性。

import React, { Component } from 'react';

class App extends Component {
  getGreeting() {
    return 'Welcome to React';
  }

  render() {
    return (
      <div>
        <h1>{this.getGreeting()}</h1>
      </div>
    );
  }
}

export default App;

现在您晓得为何React运用JavaScript类来定义React类组件。当您须要接见React的API（生命周期要领，this.state和this.setState（））时，能够运用它们。鄙人文中，您将看到怎样故差别的体式格局定义React组件，而不运用JavaScript类，由于您能够不须要一直运用类要领，生命周期要领和状况。

毕竟，JavaScript类迎接运用React中的继续，这关于React来讲不是一个抱负的效果，由于React更喜好组合而不是继续。因而，您应当为您的React组件扩大的唯一类应当是官方的React组件。

React中的箭头函数

在教关于React时，我很早就诠释了JavaScript arrow functions。它是ES6的语法之一，它推动了JavaScript在函数式编程中的生长。

// JavaScript ES5 function
function getGreeting() {
  return 'Welcome to JavaScript';
}

// JavaScript ES6 arrow function with body
const getGreeting = () => {
  return 'Welcome to JavaScript';
}

// JavaScript ES6 arrow function without body and implicit return
const getGreeting = () =>
  'Welcome to JavaScript';

JavaScript箭头函数一般用在React应用程序中，以对峙代码简约和可读。尝试从JavaScript ES5到ES6功用重构我的功用。在某些时刻，当JavaScript ES5函数和JavaScript ES6函数之间的差别很明显时，我对峙运用JavaScript ES6的体式格局来完成箭头函数。然则，我老是看到React新手的太多差别的语法能够会让人手足无措。因而，我尝试在运用它们在React中悉数运用之前，使JavaScript函数的差别特性变得清楚。在以下部份中，您将相识如安在React中常常使用JavaScript箭头函数。

作为React中的组件的function

React运用差别的编程类型，由于JavaScript是一种多方面的编程言语。在面向对象编程的时刻，React的类组件是应用JavaScript类这一种体式格局（React组件API的继续，类要领和类属性，如this.state）。另一方面，React（及其生态系统）中运用了许多的函数式编程的观点。比方，React的功用无状况组件是另一种在React中定义组件的要领。在React无状况组件就引发了一个新的思索：组件怎样像函数一样运用？

function (props) {
  return view;
}

它是一个吸收输入（比方props）并返回显现的HTML元素（视图）的函数（函数）。它不须要治理任何状况（无状况），也不须要相识任何要领（类要领，生命周期要领）。该函数只须要运用React组件中render（）要领的显现机制。那是在引入无状况组件的时刻。

function Greeting(props) {
  return <h1>{props.greeting}</h1>;
}

无状况组件是在React中定义组件的首选要领。它们具有较少的榜样，降低了庞杂性，而且比React类组件更易于保护。然则，就现在而言，二者都有本身存在的意义。

之前，文章提到了JavaScript箭头函数以及它们怎样革新您的React代码。让我们将这些函数应用于您的无状况组件。
来看看Greeting组分别运用ES5和ES6差别的写法：

// JavaScript ES5 function
function Greeting(props) {
  return <h1>{props.greeting}</h1>;
}

// JavaScript ES6 arrow function
const Greeting = (props) => {
  return <h1>{props.greeting}</h1>;
}

// JavaScript ES6 arrow function without body and implicit return
const Greeting = (props) =>
  <h1>{props.greeting}</h1>

JavaScript箭头函数是在React中对峙无状况组件简约的好要领。当更多的时刻没有盘算，因而能够省略函数体和return语句。

React类组件语法

React定义组件的体式格局跟着时刻的推移而演化。在初期阶段，React.createClass（）要领是建立React类组件的默许体式格局。现在，它已不再运用，由于跟着JavaScript ES6的鼓起，更多的是运用ES6的要领来建立React类组件。

但是，JavaScript不断生长，因而JavaScript爱好者一直在寻觅新的干事体式格局。这就是为何你会常常发明React类组件的差别语法。运用状况和类要领定义React类组件的一种要领以下：

class Counter extends Component {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0,
    };

    this.onIncrement = this.onIncrement.bind(this);
    this.onDecrement = this.onDecrement.bind(this);
  }

  onIncrement() {
    this.setState(state => ({ counter: state.counter + 1 }));
  }

  onDecrement() {
    this.setState(state => ({ counter: state.counter - 1 }));
  }

  render() {
    return (
      <div>
        <p>{this.state.counter}</p>

        <button onClick={this.onIncrement} type="button">Increment</button>
        <button onClick={this.onDecrement} type="button">Decrement</button>
      </div>
    );
  }
}

然则，当完成大批的React类组件时，构造函数中的class要领的绑定 以及起首具有构造函数变成烦琐的完成细节。荣幸的是，有一个简短的语法来挣脱这两个懊恼：

class Counter extends Component {
  state = {
    counter: 0,
  };

  onIncrement = () => {
    this.setState(state => ({ counter: state.counter + 1 }));
  }

  onDecrement = () => {
    this.setState(state => ({ counter: state.counter - 1 }));
  }

  render() {
    return (
      <div>
        <p>{this.state.counter}</p>

        <button onClick={this.onIncrement} type="button">Increment</button>
        <button onClick={this.onDecrement} type="button">Decrement</button>
      </div>
    );
  }
}

经由过程运用JavaScript箭头函数，您能够自动绑定类要领，而无需在构造函数中绑定它们。经由过程将状况直接定义为类属性，也能够在不运用props时省略构造函数。 （注重：请注重，类属性 还没有运用JavaScript言语。）因而，您能够说这类定义React类组件的体式格局比其他版本更简约。

React中的模板笔墨

模板笔墨是JavaScript ES6附带的另一种JavaScript言语特定功用。值得一提的是，由于当JavaScript和React的新手看到它们时，它们也会让人觉得疑心。以下是你正在用的衔接字符串的语法：

function getGreeting(what) {
  return 'Welcome to ' + what;
}

const greeting = getGreeting('JavaScript');
console.log(greeting);
// Welcome to JavaScript

模板笔墨能够用于雷同的笔墨笔墨，称为字符串插值：

function getGreeting(what) {
  return Welcome to ${what};
}

您只需运用 ` ` 和${}示意法来插进去JavaScript原语。然则，字符串笔墨不仅用于字符串插值，还用于JavaScript中的多行字符串：

function getGreeting(what) {
  return 
    Welcome
    to
    ${what}
  ;
}

基本上，这就是如安在多行上花样化更大的文本块。最近在JavaScript中引入了GraphQL也能够看出它 。

React中的Map, Reduce 和 Filter

为React新手传授JSX语法的最好要领是什么？一般我起首在render（）要领中定义一个变量，并在返回块中将其用作HTML中的JavaScript。

import React, { Component } from 'react';

class App extends Component {
  render() {
    var greeting = 'Welcome to React';
    return (
      <div>
        <h1>{greeting}</h1>
      </div>
    );
  }
}

export default App;

您只需运用花括号来猎取HTML花样的JavaScript。从衬着字符串到庞杂对象并没有什么差别。

import React, { Component } from 'react';

class App extends Component {
  render() {
    var user = { name: 'Robin' };
    return (
      <div>
        <h1>{user.name}</h1>
      </div>
    );
  }
}

export default App;

一般接下来的题目是：怎样显现一个项目列表？在我看来，这是诠释React最好的部份之一。没有特定于React的API，比方HTML标记上的自定义属性，使您能够在React中显现多个项目。您能够运用纯JavaScript来迭代项目列表并返回每一个项目的HTML。

import React, { Component } from 'react';

class App extends Component {
  render() {
    var users = [
      { name: 'Robin' },
      { name: 'Markus' },
    ];

    return (
      <ul>
        {users.map(function (user) {
          return <li>{user.name}</li>;
        })}
      </ul>
    );
  }
}

export default App;

之前运用过JavaScript箭头函数，你能够挣脱箭头函数体和return语句，使你的衬着输出越发简约。

import React, { Component } from 'react';

class App extends Component {
  render() {
    var users = [
      { name: 'Robin' },
      { name: 'Markus' },
    ];

    return (
      <ul>
        {users.map(user => <li>{user.name}</li>)}
      </ul>
    );
  }
}

export default App;

很快，每一个React开发人员都习气了数组的内置JavaScript map（）要领。映照数组并返回每一个项的衬着输出异常有意义。这一样适用于自定义的状况，个中filter（）或reduce（）更有意义，而不是为每一个映照项显现输出。

import React, { Component } from 'react';

class App extends Component {
  render() {
    var users = [
      { name: 'Robin', isDeveloper: true },
      { name: 'Markus', isDeveloper: false },
    ];

    return (
      <ul>
        {users
          .filter(user => user.isDeveloper)
          .map(user => <li>{user.name}</li>)
        }
      </ul>
    );
  }
}

export default App;

一般，这就是React开发人员怎样习气这些JavaScript内置函数，而没必要运用React特定的API。它只是HTML中的JavaScript。

React中的var，let和const

运用var，let和const的差别变量声明关于React的新手来讲能够会形成殽杂，纵然它们不是React特定的。或许是由于当React变得盛行时引入了JavaScript ES6。总的来讲，我尝试在我的事情室中尽早引见let和const。它只是从在React组件中与const交流var最先：

import React, { Component } from 'react';

class App extends Component {
  render() {
    const users = [
      { name: 'Robin' },
      { name: 'Markus' },
    ];

    return (
      <ul>
        {users.map(user => <li>{user.name}</li>)}
      </ul>
    );
  }
}

export default App;

然后我给出了运用哪一个变量声明的履历轨则：

• （1）不要运用var，由于let和const更细致
• （2）默许为const，由于它不能从新分配或从新声明
• （3）从新赋值变量时运用let

虽然let一般用于for轮回来递增迭代器，但const一般用于对峙JavaScript变量稳定。只管在运用const时能够变动对象和数组的内部属性，但变量声明显现了对峙变量稳定的企图。

React中的三目运算符

假如要在render中的JSX中运用if-else语句，能够运用JavaScripts三元运算符来实行此操纵：

import React, { Component } from 'react';

class App extends Component {
  render() {
    const users = [
      { name: 'Robin' },
      { name: 'Markus' },
    ];

    const showUsers = false;

    if (!showUsers) {
      return null;
    }

    return (
      <ul>
        {users.map(user => <li>{user.name}</li>)}
      </ul>
    );
  }
}

export default App;

import React, { Component } from 'react';

class App extends Component {
  render() {
    const users = [
      { name: 'Robin' },
      { name: 'Markus' },
    ];

    const showUsers = false;

    return (
      <div>
        {
          showUsers ? (
            <ul>
              {users.map(user => <li>{user.name}</li>)}
            </ul>
          ) : (
            null
          )
        }
      </div>
    );
  }
}

export default App;

另一种要领是，假如你只返回前提衬着的一边，则运用&&运算符：

import React, { Component } from 'react';

class App extends Component {
  render() {
    const users = [
      { name: 'Robin' },
      { name: 'Markus' },
    ];

    const showUsers = false;

    return (
      <div>
        {
          showUsers && (
            <ul>
              {users.map(user => <li>{user.name}</li>)}
            </ul>
          )
        }
      </div>
    );
  }
}

export default App;

我不会细致申明为何会如许，但假如你很猎奇，你能够在这里相识它和前提衬着的其他手艺：React中的一切前提衬着。毕竟，React中的前提显现仅再次显现大多数React是JavaScript而不是React特定的任何内容。

React中的Import 和 Export语句

荣幸的是，JavaScript社区肯定了运用JavaScript ES6的import 和 export。

然则，关于React和JavaScript ES6来讲，这些导入和导出语句只是另一个须要在最先运用第一个React应用程序时须要诠释的主题。很早就有了CSS，SVG或其他JavaScript文件的第一次导入。 create-react-app项目已从那些import语句最先：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div>
        <header>
          <img src alt="logo" />
          <h1>Welcome to React</h1>
        </header>
        <p>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

这对初学者项目来讲异常棒，由于它为您供应了一个周全的体验，能够导入和导出其他文件。 App组件也会在 _src/index.js_文件中导入。然则，在React中实行第一步时，我会尝试在最先时防止这些导入。相反，我尝试专注于JSX和React组件。只要在将另一个文件中的第一个React组件或JavaScript函数星散时才会引入导入和导出语句。

那末这些导入和导出语句怎样事情呢？假定您要在一个文件中导出以下变量：

const firstname = 'Robin';
const lastname = 'Wieruch';

export { firstname, lastname };

然后，您能够运用第一个文件的相对路径将它们导入到另一个文件中：

import { firstname, lastname } from './file1.js';

console.log(firstname);
// output: Robin

因而，它不一定是关于 importing/exporting 组件或函数，而是关于同享可分配给变量的一切东西（省略CSS或SVG导入/导出，但只谈JS）。您还能够将另一个文件中的一切导出变量作为一个对象导入：

import * as person from './file1.js';

console.log(person.firstname);
// output: Robin

importing能够有别号。您能够会从具有雷同定名导出的多个文件中导入功用。这就是你能够运用别号的缘由：

import { firstname as username } from './file1.js';

console.log(username);
// output: Robin

之前的一切案例都被定名为入口和出口。然则也存在默许声明。它能够用于一些用例：

• 导出和导入单个功用
• 凸起显现模块的导出API的主要功用
• 具有后备导入功用

const robin = {
  firstname: 'Robin',
  lastname: 'Wieruch',
};

export default robin;

您能够省略导入的大括号以导入默许导出：

import developer from './file1.js';

console.log(developer);
// output: { firstname: 'Robin', lastname: 'Wieruch' }

另外，导入称号能够与导出的默许称号差别。您还能够将它与定名的export和import语句一同运用：

const firstname = 'Robin';
const lastname = 'Wieruch';

const person = {
  firstname,
  lastname,
};

export {
  firstname,
  lastname,
};

export default person;

并在另一个文件中导入默许导出或定名导出：

import developer, { firstname, lastname } from './file1.js';

console.log(developer);
// output: { firstname: 'Robin', lastname: 'Wieruch' }
console.log(firstname, lastname);
// output: Robin Wieruch

您还能够节约分外的行并直接为定名导出导出变量：

export const firstname = 'Robin';
export const lastname = 'Wieruch';

这些是ES6模块的主要功用。它们能够帮助您构造代码，保护代码和设想可重用的模块API。您还能够导出和导入功用以测试它们。

React中的库

React只是应用程序的视图层。 React供应了一些内部状况治理，但除此以外，它只是一个为您的浏览器显现HTML的组件库。其他一切内容都能够从API（比方浏览器API，DOM API），JavaScript功用或外部库中增添。挑选适宜的库来补充React应用程序并不老是很简朴，然则一旦您对差别的选项有了很好的概述，就能够挑选最适合您的手艺客栈的库。

比方，能够运用本机fetch API在React中猎取数据：

import React, { Component } from 'react';

class App extends Component {
  state = {
    data: null,
  };

  componentDidMount() {
    fetch('https://api.mydomain.com')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    ...
  }
}

export default App;

然则你能够运用另一个库来猎取React中的数据。 Axios是React应用程序的一个盛行挑选：

import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {
  state = {
    data: null,
  };

  componentDidMount() {
    axios.get('https://api.mydomain.com')
      .then(data => this.setState({ data }));
  }

  render() {
    ...
  }
}

export default App;

因而，一旦您相识了须要处置惩罚的题目，React普遍而立异的生态系统应当为您供应大批处置惩罚方案 。这又不是关于React，而是相识一切可用于补充应用程序的差别JavaScript库。

React中的高阶函数

高阶函数是一个很好的编程观点，迥殊是在转向函数式编程时。在React中，相识这类函数是完整有意义的，由于在某些时刻你必需处置惩罚高阶组件，这些组件在起首相识高阶函数时能够获得最好的诠释。

能够在初期的React中展现高阶函数，而不会引入更高阶的组件。比方，假定能够依据输入字段的值过滤显现的用户列表。

import React, { Component } from 'react';

class App extends Component {
  state = {
    query: '',
  };

  onChange = event => {
    this.setState({ query: event.target.value });
  }

  render() {
    const users = [
      { name: 'Robin' },
      { name: 'Markus' },
    ];

    return (
      <div>
        <ul>
          {users
            .filter(user => this.state.query === user.name)
            .map(user => <li>{user.name}</li>)
          }
        </ul>

        <input
          type="text"
          onChange={this.onChange}
        />
      </div>
    );
  }
}

export default App;

并不老是愿望提取函数，由于它能够增添没必要要的庞杂性，但另一方面，它能够为JavaScript带来有益的进修效果。另外，经由过程提取函数，您能够将其与React组件断绝开来举行测试。因而，让我们运用供应给内置过滤器功用的功用来展现它。

import React, { Component } from 'react';

function doFilter(user) {
  return this.state.query === user.name;
}

class App extends Component {
  ...

  render() {
    const users = [
      { name: 'Robin' },
      { name: 'Markus' },
    ];

    return (
      <div>
        <ul>
          {users
            .filter(doFilter)
            .map(user => <li>{user.name}</li>)
          }
        </ul>

        <input
          type="text"
          onChange={this.onChange}
        />
      </div>
    );
  }
}

export default App;

之前的完成不起作用，由于doFilter（）函数须要从状况晓得查询属性。因而，您能够经由过程将其包含在另一个致使更高阶函数的函数中来将其传递给函数。

import React, { Component } from 'react';

function doFilter(query) {
  return function (user) {
    return this.state.query === user.name;
  }
}

class App extends Component {
  ...

  render() {
    const users = [
      { name: 'Robin' },
      { name: 'Markus' },
    ];

    return (
      <div>
        <ul>
          {users
            .filter(doFilter(this.state.query))
            .map(user => <li>{user.name}</li>)
          }
        </ul>

        <input
          type="text"
          onChange={this.onChange}
        />
      </div>
    );
  }
}

export default App;

基本上，高阶函数是返回函数的函数。经由过程运用JavaScript ES6箭头函数，您能够使更高阶的函数更简约。另外，这类速记版本使得将功用组合成功用更具吸引力。

const doFilter = query => user =>
  this.state.query === user.name;

现在能够从文件中导出doFilter（）函数，并将其作为纯（高阶）函数零丁测试。在相识了高阶函数以后，建立了一切基本知识，以便更多地相识React的高阶组件。

将这些函数提取到React组件以外的（高阶）函数中也能够有利于零丁测试React的当地状况治理。

export const doIncrement = state =>
  ({ counter: state.counter + 1 });

export const doDecrement = state =>
  ({ counter: state.counter - 1 });

class Counter extends Component {
  state = {
    counter: 0,
  };

  onIncrement = () => {
    this.setState(doIncrement);
  }

  onDecrement = () => {
    this.setState(doDecrement);
  }

  render() {
    return (
      <div>
        <p>{this.state.counter}</p>

        <button onClick={this.onIncrement} type="button">Increment</button>
        <button onClick={this.onDecrement} type="button">Decrement</button>
      </div>
    );
  }
}

缭绕代码库挪动函数是相识在JavaScript中运用函数作为拳头类国民的优点的好要领。将代码移向函数式编程时，它异常壮大。

React中的解构和流传运算符

JavaScript中引入的另一种言语特性称为解构。一般状况下，您必需从您state或组件中的props接见大批属性。您能够在JavaScript中运用解构赋值，而不是逐一将它们分配给变量。

// no destructuring
const users = this.state.users;
const counter = this.state.counter;

// destructuring
const { users, counter } = this.state;

这对功用无状况组件迥殊有效，由于它们老是在函数署名中吸收props对象。一般，您不会运用道具而是运用道具，因而您能够对功用署名中已有的内容举行解构。

// no destructuring
function Greeting(props) {
  return <h1>{props.greeting}</h1>;
}

// destructuring
function Greeting({ greeting }) {
  return <h1>{greeting}</h1>;
}

解构也适用于JavaScript数组。另一个很棒的特性是其他的解构。它一般用于拆分对象的一部份，但将盈余属性保留在另一个对象中。

// rest destructuring
const { users, ...rest } = this.state;

以后，能够运用用户举行衬着，比方在React组件中，而在其他地方运用盈余的状况。这就是JavaScript扩大运算符 用于将其他对象转发到下一个组件的位置。鄙人一节中，您将看到此运算符的运转状况。

JavaScript比React更主要

总之，有许多JavaScript能够在React中运用。虽然React只要一个API外表地区，但开发人员必需习气JavaScript供应的一切功用。这句话并不是没有任何理由：“成为React开发人员会让你成为更好的JavaScript开发人员”。让我们经由过程重构更高阶的组件来回忆一下React中JavaScript的一些进修方面。

function withLoading(Component) {
  return class WithLoading extends {
    render() {
      const { isLoading, ...props } = this.props;

      if (isLoading) {
        return <p>Loading</p>;
      }

      return <Component { ...props } />;
    }
  }
  };
}

当isLoading prop设置为true时，此高阶组件仅用于显现前提加载指导符。不然它显现输入组件。您已能够看到（歇息）解构和流传运算符。后者能够在衬着的Component中看到，由于props对象的一切盈余属性都传递给Component。

使高阶组件更简约的第一步是将返回的React类组件重构为功用无状况组件：

function withLoading(Component) {
  return function ({ isLoading, ...props }) {
    if (isLoading) {
      return <p>Loading</p>;
    }

    return <Component { ...props } />;
  };
}

您能够看到其他的解构也能够在函数的署名中运用。接下来，运用JavaScript ES6箭头函数使高阶组件更简约：

const withLoading = Component => ({ isLoading, ...props }) => {
  if (isLoading) {
    return <p>Loading</p>;
  }

  return <Component { ...props } />;
}

增添三元运算符可将函数体收缩为一行代码。因而能够省略函数体，而且能够省略return语句。

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

如您所见，高阶组件运用种种JavaScript而不是React相干手艺：箭头函数，高阶函数，三元运算符，解构和扩大运算符。这就是如安在React应用程序中运用JavaScript的功用。

人们常常说进修React的进修曲线很峻峭。然则，只要将React留在等式中并将一切JavaScript消除在外。当其他Web框架正在实行时，React不会在顶部增添任何外部笼统层。相反，你必需运用JavaScript。因而，考验您的JavaScript妙技，您将成为一个巨大的React开发人员。