菜单

React/React Native 的ES5 ES6写法对照表

2019年3月12日 - 金沙前端

读书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在此以前你不须要控制那个基础知识,但在念书或执行它时必定会冒出那些基础知识。

以下演习是自己尝试为你提供3个大约普遍但明显的列表,当中列出了拥有分裂的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}/>
                }}/>
        );
    }
}

诠释意见写得很理解了,就不啰嗦了。

一 、在ES5里,即使使用CommonJS标准,引入React包为主通过require实行,代码类似那样:
var React = require(‘react’);
var {Component,PropTypes} = 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。
啊,对,还有1个小细节,细心的同志审时度势看到自个儿的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

/**

/**

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

理解不了的请看注释

##SecondPage

/**

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

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

/**

/**

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

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

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

类描述了1个实体,该实体用作创制该实体实例的蓝图。一旦采取new言辞成立了类的实例,就会调用该类的构造函数,该实例化该类的实例。因而,类能够拥有经常位于其构造函数中的属性。别的,类措施(例如getName())用于读取(或写入)实例的数额。类的实例在类中代表为此目的,但实例外部仅内定给JavaScript变量。

常常,类用于面向对象编制程序中的继承。它们在JavaScript中用来同一的,而extends语句可用于从另3个类继承3个类。具有extends语句的更标准的类继承了更通用类的持有功能,但能够向其添加其专用成效。

JavaScript

class Developer { constructor(firstname, lastname) { this.firstname =
firstname; this.lastname = lastname; } getName() { return this.firstname

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中,要导出2个类给其他模块用,一般通过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.高阶函数:

概念:接受函数作为输入,或是输出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来说,只要套用那个高阶组件,大家的新组件中就会多1个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来定义1个组件类,像这么:
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;

然后自个儿付诸了选用哪个变量证明的经验法则:

纵然let常常用于for循环来递增迭代器,但const日常用于维持JavaScript变量不变。就算在使用const时能够更改对象和数组的中间属性,但变量声显然示了保持变量不变的企图。

给组件定义方法

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图