如果您有任何其他不在列表中的内容betway体育a

学学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下促成均等的成效。

ReactNative 栈导航(StackNavigator):
首先步引进import {StackNavigator} from 'react-navigation';
第二步:创立组件设置navigationOptions
其三步:StackNavigator 配置显示屏
(1.亟待做跳转的其它零件时要求经过props获取navigate ,
const {navigate}=this.props.navigation,然后在跳转事件之中调用navigator('传入要跳转显示屏对应的key')
2.比如在navigationOptions里面做跳转则供给呢{navigation}传进去,然后代用navigation.navigate('传入要跳转显示屏对应的key'),如下:
在导航的右边手增多headerRight 入眼是把navigation传进去,比方

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

注脚意见写得很精晓了,就不啰嗦了。

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对象里的点子都挂载到原对象上,来落到实处指标的混入。

1、在ES5里,若是选择CommonJS标准,引进React包为主通过require进行,代码类似那样:
var React = require('react');
var {Component,PropTypes} = React;

static navigationOptions=({navigation})=>({

目录

  • 从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)
如有不完善地方,欢迎讨论

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会智能地将它们统一齐来实施。

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

title:'Title',

从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';

headerRight:<Button title='right' onPress={()=>navigation.navigate('这里是指向的零件key')}/>

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;

});
3.内需传参数的时候在navigate(参数一是路由名字,参数二dict传值)
navigate('Chat',{user:'abc'})
取参数的时候 供给 const {params} = this.props.navigation.state.
比如:const {params} = this.props.navigation.state;
return <Text>Chat with{params.user}</Text>
倘若是在navigationOptions取参数
比如 static navigationOptions =({navigation})=>({
title:${navigation.state.params.user},
}
)
//)。
···
/**

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

  • Sample React Native App
  • https://github.com/facebook/react-native
  • @flow
    */

作为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';

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
Dimensions,
TextInput,
ScrollView,
FlatList,
SectionList,
Button
} from 'react-native';

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;

        }

    }

概念组件

import {StackNavigator} from 'react-navigation';

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

class HomeScreen extends Component{
static navigationOptions =({navigation})=>({
title:'Main',
headerRight:<Button title="Right" onPress={()=>navigation.navigate('Sec',{user:'Lucy'})}/>,
}) ;
render(){
const {navigate} = this.props.navigation;
return(
<View>
<Text>this is Main</Text>
<Button title="Second" onPress={()=>navigate('Sec',{user:'Lucy'})}/>
</View>
);
}

本文由必威发布于必威-前端,转载请注明出处:如果您有任何其他不在列表中的内容betway体育a

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。