www.qjdy.com-奇迹赌场 > www.qjdy.com官网 > 在开始使用React之前你不需要掌握这些基础知识

原标题:在开始使用React之前你不需要掌握这些基础知识

浏览次数:54 时间:2019-10-29

学习React此前您须要明白的的JavaScript基础知识

2018/07/25 · JavaScript · React

原著出处:

Robin   译文出处:[众成翻译

_小生_]()   

在本人的研究探讨会时期,越来越多的材质是有关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类组件:

JavaScript

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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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的事态下学习它们。

JavaScript

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());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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语句的更专门的事业的类承袭了更通用类的有所机能,但足以向其增加其专项使用效能。

JavaScript

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());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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类的具有机能。

JavaScript

import React, { Component } from 'react'; class App extends Component { render() { return ( <div> <h1>Welcome to React</h1> </div> ); } } export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
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类有协理使用你的正经表现扩充通用类。由此,您能够引进本身的类方式或性质。

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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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中的箭头函数

When teaching someone about React, I explain JavaScript arrow functions pretty early. They are one of JavaScript’s language additions in ES6 which pushed JavaScript forward in functional programming.

在教关于React时,小编很已经解释了JavaScript arrow functions。它们是ES6中JavaScript的言语加上之生龙活虎,它助长了JavaScript在函数式编制程序中的发展。

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';

1
2
3
4
5
6
7
8
9
10
11
12
13
// 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无状态组件就抓住了二个新的想想:组件如何像函数相仿使用?

JavaScript

function (props) { return view; }

1
2
3
function (props) {
  return view;
}

它是二个收下输入(例如props)并重回展现的HTML成分(视图)的函数(函数)。它不须要管住任何动静(无状态),也不必要驾驭其余方法(类措施,生命周期方法)。该函数只需求利用React组件中render()方法的变现机制。那是在引进无状态组件的时候。

JavaScript

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

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

无状态组件是在React中定义组件的首推办法。它们具有超级少的样子,裁减了复杂,並且比React类组件更便于维护。不过,就当下而言,两个都有投机留存的意思。

以前,随笔提到了JavaScript箭头函数以致它们怎么样修正您的React代码。让大家将那么些函数应用于你的无状态组件。 来看看Greeting组分别使用ES5和ES6莫衷一是的写法:

JavaScript

// 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
// 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类组件的后生可畏种办法如下:

JavaScript

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> ); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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方法的绑定 以至首先具备构造函数变为繁杂的完结细节。幸运的是,有叁个粗略的语法来解脱那五个烦心:

JavaScript

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> ); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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的生手看见它们时,它们也会令人认为纳闷。以下是你正在用的一而再一连字符串的语法:

JavaScript

function getGreeting(what) { return 'Welcome to ' what; } const greeting = getGreeting('JavaScript'); console.log(greeting); // Welcome to JavaScript

1
2
3
4
5
6
7
function getGreeting(what) {
  return 'Welcome to ' what;
}
 
const greeting = getGreeting('JavaScript');
console.log(greeting);
// Welcome to JavaScript

模板文字能够用来同风姿洒脱的文字文字,称为字符串插值:

JavaScript

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

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

你只需选取和${}表示法来插入JavaScript原语。然则,字符串文字不仅仅用于字符串插值,还用于JavaScript中的多行字符串:

JavaScript

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

1
2
3
4
5
6
7
function getGreeting(what) {
  return
    Welcome
    to
    ${what}
  ;
}

基本上,那就是怎么着在多行上格式化越来越大的文本块。近日在JavaScript中引进了GraphQL也得以见到它 。

React中的Map, Reduce 和 Filter

为React生手教授JSX语法的拔尖格局是什么?平日本人首先在render()方法中定义贰个变量,并在回来块中校其看做HTML中的JavaScript。

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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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。从渲染字符串到复杂对象并不曾什么两样。

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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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。

JavaScript

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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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语句,让你的渲染输出特别简洁。

JavaScript

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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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()更有意义,并非为每一个映射项展现输出。

JavaScript

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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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起先:

JavaScript

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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安慕希运算符来试行此操作:

JavaScript

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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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;

JavaScript

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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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;

另风流洒脱种办法是,假诺您只回去条件渲染的风姿罗曼蒂克端,则应用&&运算符:

JavaScript

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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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语句开首:

JavaScript

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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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函数分离时才会引进导入和导出语句。

那么那些导入和导出语句怎么样职业呢?要是您要在叁个文书中程导弹出以下变量:

JavaScript

const firstname = 'Robin'; const lastname = 'Wieruch'; export { firstname, lastname };

1
2
3
4
const firstname = 'Robin';
const lastname = 'Wieruch';
 
export { firstname, lastname };

接下来,您能够行使第二个公文的相对路线将它们导入到另三个文本中:

JavaScript

import { firstname, lastname } from './file1.js'; console.log(firstname); // output: Robin

1
2
3
4
import { firstname, lastname } from './file1.js';
 
console.log(firstname);
// output: Robin

故而,它不自然是有关 importing/exporting 组件或函数,而是关于分享可分配给变量的有所东西(省略CSS或SVG导入/导出,但只谈JS)。您还能将另叁个文本中的全体导出变量作为多个指标导入:

JavaScript

import * as person from './file1.js'; console.log(person.firstname); // output: Robin

1
2
3
4
import * as person from './file1.js';
 
console.log(person.firstname);
// output: Robin

importing能够有别称。您或者会从全体同等命著名出品人出的多个公文中程导弹入成效。那正是你能够动用外号的因由:

JavaScript

import { firstname as username } from './file1.js'; console.log(username); // output: Robin

1
2
3
4
import { firstname as username } from './file1.js';
 
console.log(username);
// output: Robin

此前的装有案例都被取名叫进口和出口。不过也存在暗中同意注解。它能够用于一些用例:

  • 导出和导入单个效能
  • 崛起体现模块的导出API的重要功用
  • 具备后备导入功效

JavaScript

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

1
2
3
4
5
6
const robin = {
  firstname: 'Robin',
  lastname: 'Wieruch',
};
 
export default robin;

你能够简轻松单导入的大括号以导入暗中认可导出:

JavaScript

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

1
2
3
4
import developer from './file1.js';
 
console.log(developer);
// output: { firstname: 'Robin', lastname: 'Wieruch' }

除此以外,导入名称也许与导出的暗中同意名称不一样。您还足以将它与命名的export和import语句一齐利用:

JavaScript

const firstname = 'Robin'; const lastname = 'Wieruch'; const person = { firstname, lastname, }; export { firstname, lastname, }; export default person;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const firstname = 'Robin';
const lastname = 'Wieruch';
 
const person = {
  firstname,
  lastname,
};
 
export {
  firstname,
  lastname,
};
 
export default person;

并在另三个文书中导入暗许导出或命名导出:

JavaScript

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

1
2
3
4
5
6
import developer, { firstname, lastname } from './file1.js';
 
console.log(developer);
// output: { firstname: 'Robin', lastname: 'Wieruch' }
console.log(firstname, lastname);
// output: Robin Wieruch

你还是能够节约额外的行并直接为命名导出导出变量:

JavaScript

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

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

那个是ES6模块的重大成效。它们得以协理你协会代码,维护代码和设计可选取的模块API。您还足以导出和导入成效以测验它们。

React中的库

React只是应用程序的视图层。 React提供了部分中间情状管理,但除了,它只是八个为您的浏览器显示HTML的组件库。其余具有内容都足以从API(举个例子浏览器API,DOM API),JavaScript功能或外界库中增多。选取切合的库来补充React应用程序并不接二连三非常的粗略,然而借使你对两样的选项有了很好的概述,就足以筛选最相符你的本领货仓的库。

举例,能够选拔本机fetch API在React中获取数据:

JavaScript

import React, { Component } from 'react'; class App extends Component { state = { data: null, }; componentDidMount() { fetch('') .then(response => response.json()) .then(data => this.setState({ data })); } render() { ... } } export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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应用程序的四个风行选拔:

JavaScript

import React, { Component } from 'react'; import axios from 'axios'; class App extends Component { state = { data: null, }; componentDidMount() { axios.get('') .then(data => this.setState({ data })); } render() { ... } } export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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中显示高阶函数,而不会引进越来越高阶的零件。譬喻,倘诺能够依附输入字段的值过滤显示的客商列表。

JavaScript

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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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组件隔绝开来进展测量试验。由此,让我们运用提必要停放过滤器成效的效果来体现它。

JavaScript

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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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()函数要求从气象知道查询属性。因而,您能够由此将其包涵在另多个酿成越来越高阶函数的函数中来将其传递给函数。

JavaScript

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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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箭头函数,您能够使越来越高阶的函数越来越精简。其余,这种速记版本使得将作用组合成功用更具吸重力。

JavaScript

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

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

现行反革命得以从文件中程导弹出doFilter()函数,并将其用作纯(高阶)函数单独测量检验。在精晓了高阶函数之后,创建了全数基础知识,以便更加的多地打听React的高阶组件。

将那一个函数提取到React组件之外的(高阶)函数中也足以一本万利单独测验React的本地处境管理。

JavaScript

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> ); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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中利用解构赋值,实际不是每一种将它们分配给变量。

JavaScript

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

1
2
3
4
5
6
// no destructuring
const users = this.state.users;
const counter = this.state.counter;
 
// destructuring
const { users, counter } = this.state;

那对效率无状态组件特别有用,因为它们总是在函数签字中抽出props对象。平日,您不会接受器械而是选取道具,由此你能够对效果与利益具名中已部分内容开展解构。

JavaScript

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

1
2
3
4
5
6
7
8
9
// no destructuring
function Greeting(props) {
  return <h1>{props.greeting}</h1>;
}
 
// destructuring
function Greeting({ greeting }) {
  return <h1>{greeting}</h1>;
}

解构也适用于JavaScript数组。另二个很棒的特色是任何的解构。它通常用于拆分对象的大器晚成部分,但将剩余属性保留在另二个指标中。

JavaScript

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

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

以往,能够选用客户打开渲染,比方在React组件中,而在其余地点使用剩余的气象。那就是JavaScript扩张运算符 用于将别的对象转载到下叁个零部件的职分。在下风度翩翩节中,您将见到此运算符的运行景况。

JavaScript比React更重要

一句话来讲,有成都百货上千JavaScript能够在React中动用。即使React独有多个API表面区域,但开垦人士必需习于旧贯JavaScript提供的有所效率。那句话决不没有任何理由:“成为React开辟职员会让您变成越来越好的JavaScript开荒人士”。让大家透过重构越来越高阶的零部件来回想一下React中JavaScript的局地读书方面。

JavaScript

function withLoading(Component) { return class WithLoading extends { render() { const { isLoading, ...props } = this.props; if (isLoading) { return <p>Loading</p>; } return <Component { ...props } />; } } }; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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类组件重构为成效无状态组件:

JavaScript

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

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

您能够观望任何的解构也足以在函数的具名中应用。接下来,使用JavaScript ES6箭头函数使高阶组件更轻易:

JavaScript

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

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

丰硕安慕希运算符可将函数体减少为意气风发行代码。因而能够省略函数体,並且能够省略return语句。

JavaScript

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

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

如您所见,高阶组件使用各类JavaScript实际不是React相关技艺:箭头函数,高阶函数,安慕希运算符,解谈判扩展运算符。那正是何等在React应用程序中动用JavaScript的功效。


公众常常说学习React的读书曲线很陡峭。可是,唯有将React留在等式中并将具备JavaScript杀绝在外。当其余Web框架正在实行时,React不会在顶端加上任何外界抽象层。相反,你必得使用JavaScript。因而,锤练您的JavaScript技术,您将形成四个宏大的React开荒职员。


1 赞 2 收藏 评论

图片 1

本文由www.qjdy.com-奇迹赌场发布于www.qjdy.com官网,转载请注明出处:在开始使用React之前你不需要掌握这些基础知识

关键词: JavaScript www.4355.mg线

上一篇:本文作者

下一篇:没有了