彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 学会党委 > 学习React Native开发需要掌握的JavaScript的哪些基础

学习React Native开发需要掌握的JavaScript的哪些基础

发布时间:2019-11-15 08:21编辑:学会党委浏览(170)

    彩世界平台,学习React之前你需要知道的的JavaScript基础知识

    2018/07/25 · JavaScript · 彩世界开奖app苹果下载,React

    原文出处:

    随便找一本JavaScript入门级的书籍,或者相关视频,阅读关于基础语法的章节,所需要的知识点有:
    (1)JavaScript语法。包括语句、注释、变量、数据类型、数组(注意关联数组,Java、C++的数组中没有这个概念)、对象的基本只是
    (2)操作运算符。这个与Java、C++基本上是一样的,读者快速过一下就行了
    (3)条件语句、循环语句、switch语句。这个与Java、C++基本上是一样的
    (4)函数。JavaScript中函数也是一种变量,知道了这一点,其他与Java、C++基本上是一样的
    (5)对象。JavaScript的对象定义、实现比Java、C++宽松很多,需要稍微适应一下

    Robin   译文出处:[众成翻译

    _小生_]()   

    在我的研讨会期间,更多的材料是关于JavaScript而不是React。其中大部分归结为JavaScript ES6以及功能和语法,但也包括三元运算符,语言中的简写版本,此对象,JavaScript内置函数(map,reduce,filter)或更常识性的概念,如:可组合性,可重用性,不变性或高阶函数。这些是基础知识,在开始使用React之前你不需要掌握这些基础知识,但在学习或实践它时肯定会出现这些基础知识。

    以下演练是我尝试为您提供一个几乎广泛但简明的列表,其中列出了所有不同的JavaScript功能,以补充您的React应用程序。如果您有任何其他不在列表中的内容,只需对本文发表评论,我会及时更新。

    这些基本知识点,大多与Java或者OC的相关知识点很类似,如果有基础,差不多一天就可以了,不需要搭建JavaScript的开发环境来练习、巩固这些知识点。因为在React Native开发环境中编写代码就可以联系这些基本的JavaScript知识点。

    目录

    • 从JavaScript中学习React
    • React 和 JavaScript Classes
    • React中的箭头函数
    • 彩世界时时app,作为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 Native开发需要掌握的JavaScript的哪些基础

    关键词:

上一篇:Service Worker 从入门到进阶

下一篇:没有了