【亚洲必赢官网】学学React往日你必要通晓的的JavaScript基础知识,mixin与高阶组件

学学React往日你须要精通的的JavaScript基础知识

2018/07/25 · JavaScript
· React

原文出处:

一、mixin

什么样是mixin:创建一体系似多重继承的效果。事实上,说它是组合更是贴切。

此小说只适合新手,老驾驶员如有宝贵意见请多提。

//es6与es5的区别
无数React/React
Native的初学者都被ES6的题目迷惑:各路大神都指出我们一直攻读ES6的语法(class
Foo extends React.Component),
然则网上搜到的大队人马科目和例子都是ES5版本的,所以重重人在就学的时候连一步一趋都不知道如何做。
前日在此整治了一部分ES5和ES6的写法对照表,希望大家从此读到ES5的代码,也能因此对照,在ES6下完结平等的效率。

Robin   译文出处:[众成翻译

_小生_]()   

在自家的商量会期间,越来越多的素材是关于JavaScript而不是React。其中绝一大半归纳为JavaScript
ES6以及功能和语法,但也席卷三元运算符,语言中的简写版本,此目的,JavaScript内置函数(map,reduce,filter)或更常识性的定义,如:可组合性,可重用性,不变性或高阶函数。这一个是基础知识,在始发应用React此前你不须求控制那些基础知识,但在学习或执行它时肯定会现出这一个基础知识。

以下演练是自己尝试为你提供一个大致普遍但分明的列表,其中列出了有着不一致的JavaScript成效,以补充你的React应用程序。即使您有其他其他不在列表中的内容,只需对本文发布评论,我会立马更新。

1.封装mixin方法实例:

const mixin = function(obj,mixins){

    const newObj = obj;

    newObj.prototype = Object.create(obj.prototype);

    for(let prop in mixins){

        if(mixins.hasOwnProperty(prop)){

            newObj.prototype[prop] = mixins[prop];

        }

    }

    return newObj;

}

const BigMixin = {

    fly:()=>{

        console.log(‘I can fly’);

    }

}

const Big = function(){

    console.log(‘new big’);

}

const FlyBig = mixin(Big,BigMixin); // new big

const flyBig = new FlyBig(); // I can fly 

对于广义的mixin方法,就是用赋值的点子将mixin对象里的主意都挂载到原对象上,来贯彻目的的混入。

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

声明意见写得很精晓了,就不啰嗦了。

1、在ES5里,就算运用CommonJS标准,引入React包为主通过require进行,代码类似那样:
var React = require(‘react’);
var {Component,PropTypes} = 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

2.在React中使用mixin

React在选取createClass构建组件时提供了mixin属性。(ES6
classes格局构建组件时,不帮助mixin)

实例:

import React from ‘react’;

import PureRenderMixin from ‘react-addons-pure-render-mixin’;
//官方封装的mixin对象

React.creatClass({
    mixins:[PureRenderMixin],

    reder(){

        return <div>foo</div>;

    }    
});

注:mixins属性可以指定多少个mixin。但,固然五个mixin(也就是五个对象)中盛名称一致的不二法门,会报命名争辨错误。

利用createClass完毕的mixin可以为组件做两件事:

(1)概念工具方法。用mixin混入写好的工具方法。在须要动用工具方法的机件中设置mixin,即可使用相应工具方法。

(2)生命周期继承,props、state的联合。假如八个mixin对象中,都定义了同一个生命周期,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)
如有不完善地方,欢迎讨论

//引用具体的React Native 组件
var ReactNative = require(‘react-native’);
var {Image , Text } = ReactNative;

从JavaScript中学习React

当您进去React的世界时,日常是拔取用于启动React项目的
create-react-app【亚洲必赢官网】学学React往日你必要通晓的的JavaScript基础知识,mixin与高阶组件。。设置项目后,您将赶上以下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。

3.ES6 Classes 与 decorator

es6 classes语法,用decorator实现mixin。

注:decorator与Java中pre-defined
annotation的不同是,decorator是选拔在运行时的艺术。

//ES6 import写法更为正规
import React ,{Component,PropTypes,} from ‘react’;
import {Image ,Text } from ‘react-native’;

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组件。

4.mixin设有的题材

(1)破坏了原有组件的卷入。

   
mixin中的方法会带动新的state和props,及其它未知操作,在采用组件中不可见,不可以有目的地控制。

(2)命名争执。

   
四个mixin中,或mixin与近日组件,可能存在一样命名的章程,从而命名争持。

(3)增添复杂性。

   
当添加了一发多的mixin,就会引入越来越多的法子,从而导致代码逻辑复杂,不易维护。

导出单个类
在ES5中,要导出一个类给其余模块用,一般通过module.exports类导出
例:
//ES5
var MyComponent = React.createClass({

}) ;
module.ecports = MyComponent;

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箭头函数。

二、高阶组件

//ES6
erport default class MyComponent extends Component{

}
引用的时候也类似
//ES5
var MyComponent = require(‘./MyCompinent’);

作为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语句。

1.高阶函数:

概念:接受函数作为输入,或是输出一个函数,的函数。

正常用的map、reduce、sort等,都是高阶函数。

//ES6
import MyComponent from ‘./MyComponent’;

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类组件的方法比其它版本更精简。

2.高阶组件

概念:类似于高阶函数。接受React组件作为输入,输出一个新的React组件。

兑现格局:

(1)属性代理:高阶组件通过被包裹的React组件来操作props。

概念高阶组件:

import React,{Component} from ‘React’;

const MyContainer = (WrappedComponent) =>

    class extends Component {

        render() {

            return <WrappedComponent {…this.props} />;

        }

    }

高阶组件:MyContainer

被打包组件:WrappedComponent

{…this.props}是WrappedComponent的props对象。除了闻风不动传递WrappedComponent的props,在高阶组件中,可以安装任何props,并传递给WrappedComponent。例如:

import React,{Component} from ‘React’;

const MyContainer = (WrappedComponent) =>   

    class extends Component {       

        render() { 

             const newProps = {

                 text:newText,       

             };         

            return  <WrappedComponent {…this.props} {…newProps}
/>;    

 //注:this.props读取的是,调用WrappedComponent时传出的props。注意{…this.props}和{…newProps}书写的先后顺序。如若this.props和newProps中有一致的prop,前面的会覆盖前边的。

     }   

 }

对此WrappedComponent来说,只要套用这一个高阶组件,我们的新组件中就会多一个text的prop。

运用高阶组件:

import React,{Component} from ‘React’;

class MyComponent extends Component{

    //……

}

export default MyContainer(MyComponent);

import React,{Component} from ‘React’;

@MyContainer

class MyComponent extends Component{   

    render(){ }

}

export default MyComponent;

生命周期执行进程(类似于堆栈调用):

didmount -> HOC didmount -> (HOCs didmount) -> 

(HOCs will unmount) -> HOC will unmount -> unmount

(2)反向继承:高阶组件继承于被装进的React组件。

概念高阶组件:

const MyContainer = (WrappedComponent) =>

    class extends WrappedComponent {

        render(){

            return super.render();

        }

    }

HOC调用顺序(类似于队列):

didmount -> HOC didmount => (HOCs didmount) -> 

will unmount -> HOC will unmount -> (HOCs will unmount)

渲染威吓示例:

NO1:条件渲染

const MyContainer = (WrappedComponent) =>

    class extends WrappedComponent {

        render(){

            if(this.props.loggedIn){

                return super.render();

            }else{

                return null;

            }

        }

    }

NO2:修改render输出结果

const MyContainer = (WrappedComponent) =>

    class extends WrappedComponent {

        render(){

            const elementsTree = super.render();

            let newProps = {};

            if(elementsTree && elementsTree.type === ‘input’){

                newProps = {value:’may the force be with you’};

            }

            const props =
Object.assign({},elementsTree.props,newProps);

            const newElementsTree =
                React.cloneElement(elementsTree,props,elementsTree.props.children);

            return newElementsTree;

        }

    }

概念组件

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也得以见见它

在ES5里,平日通过React.createClass来定义一个组件类,像这么:
var Photo = React.createClass({
render : function(){
return(
<Image souce = {this.prop.source} />
);
},
});

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。

在ES6里,我们经过定义一个继承自React.Component的class来定义一个组件类,像那样:
class Photo extends React.Component {
render(){
return (
<Image source = {this.porps.source} />
);
}
}

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特定的其他内容。

从地点的事例里可以见到,给组件定义方法不再用 名字:
function()的写法,而是平昔用名字(),在艺术的结尾也无法有逗号了。

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。您还足以导出和导入功效以测试它们。

//ES5
var Photo = React.createClass({
componentWillMount: function(){
..
},
render: function(){
return(
<Image source = {this.props.source} />
);
},
});

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库。

//ES6
class Photo extends React.Component {
ComponentWillMount(){
..
}
render(){
return (
<Image source={this.props.souce} />
);
}
}

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扩大运算符
用于将其他对象转载到下一个零部件的岗位。在下一节中,您将看到此运算符的周转意况。

在ES5里,属性类型和默许属性分别通过propTypes成员和getDefaultProps方法来落到实处
//ES5
var Video = React.createClass({
getDefaultProps: function() {
return {
autoPlay: false,
maxLoops: 10,
};
},
propTypes: {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
},
render: function(){
return(
<View />
);
},
});

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

在ES6里,可以统一运用static成员来兑现
//ES6
class Video extends React.Component {
static defaultProps = {
autoPlay: false,
maxLoops: 10,
};
static propTypes = {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
}; // 注意那里有分号
render() {
return (
<View />
);
} // 注意这里既没有分号也并未逗号
}

也有人这么写,尽管不引进,但读到代码的时候你应有能理解它的意趣:

//ES6
class Video extends React.Component {
render() {
return (
<View />
);
}
}
Video.defaultProps = {
autoPlay: false,
maxLoops: 10,
};
Video.propTypes = {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
};
专注:
对React开发者而言,static成员在IE10及前边版本不可能被一连,而在IE11和其他浏览器上可以,那有时候会带来一些题材。React
Native开发者可以毫无操心这几个问题。

初始化STATE

ES5下景况类似,
//ES5
var Video = React.createClass({
getInitialState: function(){
return {
loopsRemaining: this.props.maxLoops,
};
},
})

//ES6,有二种写法:
class Video extends React.Component{
state = {
loopsRemaining: this.props.maxLoops,
}
}
然则大家引进更易驾驭的在构造函数中先河化(那样您还足以按照要求做一些盘算):
//ES6
class Video extends React.Component {
constructor(props){
super(props);
this.atate = {
loopsRemaining: this.props.maxLoops,
}
};
}
把办法作为回调提供
//ES5
var PostInfo = React.createClass({
handleOptionsButtonClick: function(e) {
// Here, ‘this’ refers to the component instance.
this.setState({showOptionsModal: true});
},
render: function(){
return (
<TouchableHighlight onPress={this.handleOptionsButtonClick}>
<Text>{this.props.label}</Text>
</TouchableHighlight>
)
},
});

在ES5下,React.createClass会把拥有的艺术都bind三次,
如此这般可以交到到自由的地点作为回调函数,而this不会转移。
但官方现在逐步认为那反而是不专业、不易通晓的。
在ES6下,你必要通过bind来绑定this引用,或者选取箭头函数(它会绑定当前scope的this引用)来调用

//ES6
class PostInfo extends React.Component
{
handleOptionsButtonClick(e){
this.setState({showOptionsModal: true});
}
render(){
return (
<TouchableHighlight
onPress={this.handleOptionsButtonClick.bind(this)}
onPress={e=>this.handleOptionsButtonClick(e)}
>
<Text>{this.props.label}</Text>
</TouchableHighlight>
)
},
}
箭头函数实际上是在此间定义了一个暂时的函数,
箭头函数的箭头=>以前是一个空括号、单个的参数名、或用括号括起的三个参数名,
而箭头之后方但是一个表达式(作为函数的重回值),或者是用花括号括起的函数体(须求活动通过return来再次回到值,否则再次来到的是undefined)。

// 箭头函数的事例
()=>1
v=>v+1
(a,b)=>a+b
()=>{
alert(“foo”);
}
e=>{
if (e == 0){
return 0;
}
return 1000/e;
}
亟待留意的是,不论是bind如故箭头函数,每回被实践都回到的是一个新的函数引用,因而一旦你还索要函数的引用去做一些其余事情(譬如卸载监听器),那么你必须团结保留这些引用

// 错误的做法
class PauseMenu extends React.Component{
componentWillMount(){
AppStateIOS.addEventListener(‘change’, this.onAppPaused.bind(this));
}
componentDidUnmount(){
AppStateIOS.removeEventListener(‘change’,
this.onAppPaused.bind(this));
}
onAppPaused(event){
}
}
// 正确的做法
class PauseMenu extends React.Component{
constructor(props){
super(props);
this._onAppPaused = this.onAppPaused.bind(this);
}
componentWillMount(){
AppStateIOS.addEventListener(‘change’, this._onAppPaused);
}
componentDidUnmount(){
AppStateIOS.removeEventListener(‘change’, this._onAppPaused);
}
onAppPaused(event){
}
}
从那么些帖子中大家还学习到一种新的做法:

// 正确的做法
class PauseMenu extends React.Component{
componentWillMount(){
AppStateIOS.addEventListener(‘change’, this.onAppPaused);
}
componentDidUnmount(){
AppStateIOS.removeEventListener(‘change’, this.onAppPaused);
}
onAppPaused = (event) => {
//把艺术直接作为一个arrow
function的性质来定义,初始化的时候就绑定好了this指针
}
}

Mixins
在ES5下,大家平常应用mixin来为大家的类添加一些新的方法,譬如PureRenderMixin
//ES5
var PureRenderMixin = require(‘react-addons-pure-render-mixin’);
React.createClass({
mixins: [PureRenderMixin],

render: function() {
return <div className={this.props.className}>foo</div>;
}
});
唯独现在官方已经不复打算在ES6里延续执行Mixin,他们说:Mixins Are Dead.
Long Live Composition。

固然如若要延续采纳mixin,仍然有一部分第三方的方案得以用,譬如那些方案

可是官方推荐,对于库编写者而言,应当尽快甩掉Mixin的编辑方式,上文中涉及Sebastian
马克(Mark)båge的一段代码推荐了一种新的编码形式:

//Enhance.js
import { Component } from “React”;

export var Enhance = ComposedComponent => class extends Component {
constructor() {
this.state = { data: null };
}
componentDidMount() {
this.setState({ data: ‘Hello’ });
}
render() {
return <ComposedComponent {…this.props} data={this.state.data}
/>;
}
};
//HigherOrderComponent.js
import { Enhance } from “./Enhance”;

class MyComponent {
render() {
if (!this.data) return <div>Waiting…</div>;
return <div>{this.data}</div>;
}
}

export default Enhance(MyComponent); // Enhanced component
用一个“增强函数”,来某个类增添一些格局,并且再次来到一个新类,那确实能得以完毕mixin所完成的多数急需。
ES6+带来的别样好处

解构&属性延展

组合使用ES6+的解构和特性延展,大家给男女传递一批属性更为有利于了。那么些例子把className以外的享有属性传递给div标签:

class AutoloadingPostsGrid extends React.Component {
render() {
var {
className,
…others, // contains all properties of this.props except for
className
} = this.props;
return (
<div className={className}>
<PostsGrid {…others} />
<button onClick={this.handleLoadMoreClick}>Load
more</button>
</div>
);
}
}
下边那种写法,则是传递所有属性的同时,用覆盖新的className值:

<div {…this.props} className=”override”>

</div>
本条例子则相反,若是属性中平昔不包涵className,则提供默认的值,而一旦属性中早就包涵了,则使用性质中的值

<div className=”base” {…this.props}>

</div>

本文转自:

网站地图xml地图