品牌动态

当前位置：新萄京娱乐场手机版 > 品牌动态 > 老车手如有宝贵意见请多提，如若您有任何另外

老车手如有宝贵意见请多提，如若您有任何另外

来源：http://www.chrisproduction.com 作者：新萄京娱乐场手机版 时间：2019-10-05 16:46

上学React以前您需求精通的的JavaScript基础知识

2018/07/25 · JavaScript · React

初稿出处：

此小说只符合新手，老开车员如有宝贵意见请多提。

Robin   译文出处：[众成翻译

_小生_]()   

在本人的研究研讨会时期，越来越多的素材是有关JavaScript并非React。个中绝大多数总结为JavaScript ES6以及功用和语法，但也包蕴长富运算符，语言中的简写版本，此指标，JavaScript内置函数（map，reduce，filter）或更常识性的概念，如：可组合性，可重用性，不改变性或高阶函数。这几个是基础知识，在伊始运用React在此以前你不供给精晓那几个基础知识，但在上学或执行它时确定会产出那个基础知识。

以下练习是自个儿尝试为您提供一个大概广泛但一览了然的列表，个中列出了具备差异的JavaScript功效，以补充你的React应用程序。如若你有其余其余不在列表中的内容，只需对本文公布商酌，小编会立马更新。

App

/**
 * Created by function on 2017/3/9.
 */
import React, {Component} from 'react';
//导入对应的页面文件
import Home from './Home'
import {
    StyleSheet,
    View,
    Text,
    Navigator
} from 'react-native';

export default class App extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        let defaultName = 'Home';
        let defaultComponent = Home;
        return (
            /**
             * initialRoute：指定了默认的页面，也就是启动app之后会看到界面的第一屏。 需要填写两个参数: name 跟 component。
             * configureScene：页面之间跳转时候的动画和手势，具体请看官方文档
             * renderScene：导航栏可以根据指定的路由来渲染场景，调用的参数是路由和导航器
             */
            <Navigator
                initialRoute={{name: defaultName, component: defaultComponent}}
                configureScene={(route) => {
                    return Navigator.SceneConfigs.VerticalDownSwipeJump;
                }}
                renderScene={(route, navigator) => {
                    let Component = route.component;
                    return <Component {...route.params} navigator={navigator}/>
                }}/>
        );
    }
}

评释意见写得很了然了，就不啰嗦了。

目录

  • 从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

Home

/**
 * Created by function on 2017/3/11.
 */
import React, {Component} from 'react';
import SecondPage from './SecondPage';
import TextButton from '../components/TextButton';
import {
    View,
} from 'react-native';
export default class Home extends Component {

    constructor(props) {
        super(props);
    }

    _onPress = () => {
        /**
         * 为什么这里可以取得 props.navigator?请看上面的App.js:
         * <Component {...route.params} navigator={navigator} />
         * 这里传递了navigator作为props
         */
        const { navigator } = this.props;

        if(navigator) {
            navigator.push({
                name: 'SecondPage',
                component: SecondPage,
            })
        }
    };

    render() {
        const {counter} = this.props;
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <Text>我是第一个界面</Text>
                <TextButton onPress={this._onPress} text={'点击跳转'}/>
            </View>
        );
    }
}

简短说一下，这里的页面便是轻巧的四个TextButton，点击事件之中onPress 先获取父页面传过来的navigator，推断到要是存在，这边就push跳转叁个对面包车型大巴页面，笔者这边写的是SecondPage。
嗯，对，还或许有多少个小细节，留心的同志审时度势见到自身的onPress不用那样写

_onPress={ this._onPress.bind (this) }

或许那样写

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
        this._onPress = this._onPress.bind(this);
    }```
把方法直接作为一个arrow function的属性来定义，初始化的时候就绑定好了this指针
写了以后是这样的

_onPress = () => {
const {navigator} = this.props;
if (navigator) {
navigator.push({
name: 'SecondPage',
component: SecondPage,
})
}
};

没写是这样

_onPress(){
const {navigator} = this.props;
if (navigator) {
navigator.push({
name: 'SecondPage',
component: SecondPage,
})
}
};

大家对比一下就知道细节在哪里
简单封装一个TextButton

/**

  • Created by function on 2017/3/9.
    */
    import React, {Component} from 'react';
    import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';

/**

  • 回顾包装三个Button

  • text：展现的剧情

  • onPress：回调
    */
    export default class TextButton extends Component {

    constructor(props) {
    super(props);
    }

    render() {
    const {text, onPress} = this.props;

     return (
     <View>
         <TouchableOpacity onPress={onPress} style={styles.button}>
             <Text>{text}</Text>
         </TouchableOpacity>
     </View>
 );

    }
    }

const styles = StyleSheet.create({
button: {
width: 100,
height: 30,
padding: 10,
backgroundColor: 'lightgray',
alignItems: 'center',
justifyContent: 'center',
margin: 3
}
});

理解不了的请看注释

##SecondPage

/**

  • Created by function on 2017/3/11.
    */
    import React, {Component} from 'react';
    import TextButton from '../components/TextButton';
    import {
    View,
    Text,
    } from 'react-native';
    export default class SecondPage extends Component {

    _onPress = () => {
    const { navigator } = this.props;
    if(navigator) {
    /**
    * 以为就如入栈出栈
    */
    navigator.pop();
    }
    };

    render() {
    return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
    <Text style={{color: 'red'}}>作者是第贰个分界面</Text>
    <TextButton onPress={this._onPress} text={'点击跳回去'}/>
    </View>
    );
    }
    }

就简单的显示几个文字和跳转回去的按钮
##来看看效果
![效果图.gif](http://upload-images.jianshu.io/upload_images/4416446-3f0efc1b3f450666.gif?imageMogr2/auto-orient/strip)
手势和跳转动画在上面说了。
如有不完善地方，欢迎讨论

##带参跳转
按照上面的例子，加以改造。
直接上代码吧，注释意见写得听清楚的了

/**

  • Created by function on 2017/3/11.
    */
    import React, {Component} from 'react';
    import SecondPage from './SecondPage';
    import TextButton from '../components/TextButton';
    import {
    View,
    Text,
    } from 'react-native';
    export default class Home extends Component {

    // 构造
    constructor(props) {
    super(props);
    // 最早状态
    this.state = {
    id: 2,
    user: '',
    };
    }

    _onPress = () => {
    /**
    * 为啥这里能够获取 props.navigator?请看下边的App.js:
    * <Component {...route.params} navigator={navigator} />
    * 这里传递了navigator作为props
    */
    const {navigator} = this.props;

     if (navigator) {
     navigator.push({
         name: 'SecondPage',
         component: SecondPage,
         params: {
             id: this.state.id,
             /**
              * 把getUser这个方法传递给下一个页面获取user
              * @param user
              */
             getUser: (user) => {
                 this.setState({
                     user: user
                 })
             }
         }
     })
 }

    };

    render() {
    const {user} = this.state;
    return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
    {user === '' && <Text>笔者是首先个分界面</Text>}
    {user !== '' && <Text>客商音信: { JSON.stringify(user) }</Text>}
    <TextButton onPress={this._onPress} text={'点击跳转'}/>
    </View>
    );
    }
    }

/**

  • Created by function on 2017/3/11.
    */
    import React, {Component} from 'react';
    import TextButton from '../components/TextButton';
    import {
    View,
    Text,
    } from 'react-native';

const USER = {
1: {name: 'Action', age: 23},
2: {name: 'Function', age: 25}
};

export default class SecondPage extends Component {

// 构造
constructor(props) {
    super(props);
    // 初始状态
    this.state = {
        id: '',
    };
}

componentDidMount() {
    /**
     *  这里获取从上个页面跳转传递过来的参数: id，赋值给this.state.id
     */
    this.setState({
        id: this.props.id
    })
}

_onPress = () => {
    const {navigator} = this.props;
    if (this.props.getUser) {
        let user = USER[this.props.id];
        this.props.getUser(user);
    }
    if (navigator) {
        /**
         * 感觉就像入栈出栈
         */
        navigator.pop();
    }
};

render() {
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text style={{fontSize: 15}}>获得的参数: id={ this.state.id }</Text>
            <Text style={{color: 'red'}}>我是第二个界面</Text>
            <TextButton onPress={this._onPress} text={'点击跳回去'}/>
        </View>
    );
}

}

##效果图


![效果图.gif](http://upload-images.jianshu.io/upload_images/4416446-2c1b7115e00c2078.gif?imageMogr2/auto-orient/strip)
github会随着更新而更新[https://github.com/LinsanityZ/EnjoyGossip](https://github.com/LinsanityZ/EnjoyGossip)
如有不完善地方，欢迎讨论

从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的语法），但日常所有事情都亟需表达。那篇文章应该发表所有事物，超越50%是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 };

然后，您能够选取第2个文件的相对路线将它们导入到另八个文书中：

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

本文由新萄京娱乐场手机版发布于品牌动态,转载请注明出处：老车手如有宝贵意见请多提，如若您有任何另外

关键词：

上一篇：没有了

下一篇：初稿出处

相关阅读：