欢迎您来到懒之才-站长的分享平台!   学会偷懒,并懒出境界是提高工作效率最有效的方法!
首页 > 经验分享 > Js&Ajax > 学习React之前你需要知道的的JavaScript基础知识

学习React之前你需要知道的的JavaScript基础知识

2018-07-27 473 收藏 0 赞一个 0 真差劲 0 去评论

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

fc10f7547e6a456b8270517063a46588.jpeg

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


目录

● 从Java中学习React

● React 和 Java Classes

● React中的箭头函数

● 作为React中的组件的fuuction

● React类组件语法

● 在React中的Map, Reduce 和 Filter

● React中的var,let和const

● React中的三元运算符

● React中的Import 和 Export

● React中的库

● React中的高阶函数

● React中的解构和传播运算符

● There is more Java than React


从Java中学习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的语法),但通常所有的事情都需要解释。这篇文章应该揭示所有的东西,大部分是Java,而不用担心React。

React和Java类

在开始时遇到React类组件,需要有关Java类的基础只是。Java类在语言中是相当新的。以前,只有Java的原型链也可以用于继承。Java类在原型继承之上构建,使整个事物更简单。

定义React组件的一种方法是使用Java类。为了理解Java类,您可以花一些时间在没有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())用于读取(或写入)实例的数据。类的实例在类中表示为此对象,但实例外部仅指定给Java变量。

通常,类用于面向对象编程中的继承。它们在Java中用于相同的,而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类组件。 Java类用于定义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 Java类的实例。并且不仅生命周期方法会消失,React的API方法(例如用于本地状态管理的this.setState())也不可用。

但是,正如您所看到的,使用Java类有利于使用您的专业行为扩展通用类。因此,您可以引入自己的类方法或属性。

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使用Java类来定义React类组件。当您需要访问React的API(生命周期方法,this.state和this.setState())时,可以使用它们。在下文中,您将看到如何以不同的方式定义React组件,而不使用Java类,因为您可能不需要始终使用类方法,生命周期方法和状态。

毕竟,Java类欢迎使用React中的继承,这对于React来说不是一个理想的结果,因为React更喜欢组合而不是继承。因此,您应该为您的React组件扩展的唯一类应该是官方的React组件。

React中的箭头函数

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

在教关于React时,我很早就解释了Java arrow functions。它们是ES6中Java的语言添加之一,它推动了Java在函数式编程中的发展。

// Java ES5 function
function getGreeting() { 
    return 'Welcome to Java';
}
// Java ES6 arrow function with body
const getGreeting = () => {
 return 'Welcome to Java';}
// Java ES6 arrow function without body and 
implicit returnconst getGreeting = () => 'Welcome to Java';

Java箭头函数通常用在React应用程序中,以保持代码简洁和可读。尝试从Java ES5到ES6功能重构我的功能。在某些时候,当Java ES5函数和Java ES6函数之间的差异很明显时,我坚持使用Java ES6的方式来实现箭头函数。但是,我总是看到React新手的太多不同的语法可能会让人不知所措。因此,我尝试在使用它们在React中全部使用之前,使Java函数的不同特性变得清晰。在以下部分中,您将了解如何在React中常用Java箭头函数。

作为React中的组件的function

React使用不同的编程范例,因为Java是一种多方面的编程语言。在面向对象编程的时候,React的类组件是利用Java类这一种方式(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类组件更易于维护。但是,就目前而言,两者都有自己存在的意义。

以前,文章提到了Java箭头函数以及它们如何改进您的React代码。让我们将这些函数应用于您的无状态组件。 来看看Greeting组分别使用ES5和ES6不同的写法:

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

Java箭头函数是在React中保持无状态组件简洁的好方法。当更多的时候没有计算,因此可以省略函数体和return语句。

React类组件语法

React定义组件的方式随着时间的推移而演变。在早期阶段,React.createClass()方法是创建React类组件的默认方式。如今,它已不再使用,因为随着Java ES6的兴起,更多的是使用ES6的方法来创建React类组件。

然而,Java不断发展,因此Java爱好者一直在寻找新的做事方式。这就是为什么你会经常发现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> 
        ); 
    }
}

通过使用Java箭头函数,您可以自动绑定类方法,而无需在构造函数中绑定它们。通过将状态直接定义为类属性,也可以在不使用props时省略构造函数。 (注意:请注意,类属性 尚未使用Java语言。)因此,您可以说这种定义React类组件的方式比其他版本更简洁。

React中的模板文字

模板文字是Java ES6附带的另一种Java语言特定功能。值得一提的是,因为当Java和React的新手看到它们时,它们也会让人感到困惑。以下是你正在用的连接字符串的语法:

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

模板文字可以用于相同的文字文字,称为字符串插值:

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

您只需使用` `和${}表示法来插入Java原语。但是,字符串文字不仅用于字符串插值,还用于Java中的多行字符串:

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

基本上,这就是如何在多行上格式化更大的文本块。最近在Java中引入了GraphQL也可以看出它 。

React中的Map, Reduce 和 Filter

为React新手教授JSX语法的最佳方法是什么?通常我首先在render()方法中定义一个变量,并在返回块中将其用作HTML中的Java。

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格式的Java。从渲染字符串到复杂对象并没有什么不同。

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中呈现多个项目。您可以使用纯Java来迭代项目列表并返回每个项目的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;

之前使用过Java箭头函数,你可以摆脱箭头函数体和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开发人员都习惯了数组的内置Java 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开发人员如何习惯这些Java内置函数,而不必使用React特定的API。它只是HTML中的Java。

React中的var,let和const

使用var,let和const的不同变量声明对于React的新手来说可能会造成混淆,即使它们不是React特定的。也许是因为当React变得流行时引入了Java 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通常用于保持Java变量不变。尽管在使用const时可以更改对象和数组的内部属性,但变量声明显示了保持变量不变的意图。

React中的三目运算符

如果要在render中的JSX中使用if-else语句,可以使用Javas三元运算符来执行此操作:

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是Java而不是React特定的任何内容。

React中的Import 和 Export语句

幸运的是,Java社区确定了使用Java ES6的import 和 export。

但是,对于React和Java ES6来说,这些导入和导出语句只是另一个需要在开始使用第一个React应用程序时需要解释的主题。很早就有了CSS,SVG或其他Java文件的第一次导入。 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组件或Java函数分离时才会引入导入和导出语句。

那么这些导入和导出语句如何工作呢?假设您要在一个文件中导出以下变量:

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),Java功能或外部库中添加。选择合适的库来补充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,而是了解所有可用于补充应用程序的不同Java库。

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;

并不总是希望提取函数,因为它可以增加不必要的复杂性,但另一方面,它可以为Java带来有益的学习效果。此外,通过提取函数,您可以将其与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;

基本上,高阶函数是返回函数的函数。通过使用Java 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> 
        ); 
    }
}

围绕代码库移动函数是了解在Java中使用函数作为拳头类公民的好处的好方法。将代码移向函数式编程时,它非常强大。

React中的解构和传播运算符

Java中引入的另一种语言特性称为解构。通常情况下,您必须从您state或组件中的props访问大量属性。您可以在Java中使用解构赋值,而不是逐个将它们分配给变量。

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

这对功能无状态组件特别有用,因为它们总是在函数签名中接收props对象。通常,您不会使用道具而是使用道具,因此您可以对功能签名中已有的内容进行解构。

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

解构也适用于Java数组。另一个很棒的特征是其余的解构。它通常用于拆分对象的一部分,但将剩余属性保留在另一个对象中。

// rest destructuringconst { users, ...rest } = this.state;

之后,可以使用用户进行渲染,例如在React组件中,而在其他地方使用剩余的状态。这就是Java扩展运算符 用于将其余对象转发到下一个组件的位置。在下一节中,您将看到此运算符的运行情况。

Java比React更重要

总之,有很多Java可以在React中使用。虽然React只有一个API表面区域,但开发人员必须习惯Java提供的所有功能。这句话并非没有任何理由:“成为React开发人员会让你成为更好的Java开发人员”。让我们通过重构更高阶的组件来回顾一下React中Java的一些学习方面。

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

您可以看到其余的解构也可以在函数的签名中使用。接下来,使用Java 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 } />

如您所见,高阶组件使用各种Java而不是React相关技术:箭头函数,高阶函数,三元运算符,解构和扩展运算符。这就是如何在React应用程序中使用Java的功能。

人们经常说学习React的学习曲线很陡峭。但是,只有将React留在等式中并将所有Java排除在外。当其他Web框架正在执行时,React不会在顶部添加任何外部抽象层。相反,你必须使用Java。因此,磨练您的Java技能,您将成为一个伟大的React开发人员。

原文:

https://www.robinwieruch.de/java-fundamentals-react-requirements/

译文

https://www.zcfy.cc/article/java-fundamentals-before-learning-react

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。

三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!

四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.

五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源,请注明转载来自并附带链接

七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com

大家评论