创建组件设置navigationOptions,代码类似这样
分类:巴黎人-前端

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

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

讲解意见写得很明亮了,就不啰嗦了。

4.mixin留存的标题

(1)破坏了本来组件的包装。

    mixin中的方法会带来新的state和props,及别的未知操作,在动用组件中不可知,不能有目标地调整。

(2)命名争辨。

    多少个mixin中,或mixin与如今组件,或然存在同样命名的措施,进而命名争辨。

(3)增添复杂性。

    当增添了越多的mixin,就能够引进越多的点子,进而产生代码逻辑复杂,不易维护。

本文转自:

});
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和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组件。

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'}}>作者是第2个分界面</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)
如有不完善地方,欢迎讨论

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对象里的主意都挂载到原对象上,来落到实处目的的混入。

// 错误的做法
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){
}
}
从这些帖子中大家还学习到一种新的做法:

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

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。您仍可以导出和导入功效以测量检验它们。

此小说只适合生手,老车手如有宝贵意见请多提。

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

在ES6里,大家由此定义多少个接续自React.Component的class来定义二个组件类,像那样:
class Photo extends React.Component {
render(){
return (
<Image source = {this.porps.source} />
);
}
}

var screenWidth =Dimensions.get('window').width;
const styles = StyleSheet.create({

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。

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;

        }

    }

初始化STATE

import {StackNavigator} from 'react-navigation';

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

1.高阶函数:

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

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

//ES6
import MyComponent from './MyComponent';

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

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

二、高阶组件

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

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

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

3.ES6 Classes 与 decorator

es6 classes语法,用decorator实现mixin。

注:decorator与Java中pre-defined annotation的界别是,decorator是行使在运营时的法子。

//ES6
erport default class MyComponent extends Component{
...
}
援引的时候也类似
//ES5
var MyComponent = require('./MyCompinent');

title:'Title',

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增添运算符 用于将其余对象转载到下三个零部件的地方。在下一节中,您将见到此运算符的周转处境。

一、mixin

怎么是mixin:创建一种类似多种承接的效果。事实上,说它是组合一发方便。

解构&属性延展

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传进去,比方

读书React在此以前您需求精晓的的JavaScript基础知识

2018/07/25 · JavaScript · React

原稿出处:

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

AppRegistry.registerComponent('AwesomeProject', () => App);
···

本文由巴黎人手机版发布于巴黎人-前端,转载请注明出处:创建组件设置navigationOptions,代码类似这样

上一篇:页面会出现白屏,js对页面加载和渲染有两个影响 下一篇:没有了
猜你喜欢
热门排行
精彩图文