来自 Web前端 2019-11-22 07:41 的文章
当前位置: 澳门三合彩票 > Web前端 > 正文

假若你有别的别的不在列表中的内容,老车手如

读书React早前您需求精通的的JavaScript功底知识

2018/07/25 · JavaScript · React

初藳出处:

一、mixin

如何是mixin:创制生龙活虎种恍若多种世襲的效果。事实上,说它是组合更进一层适宜。

此随笔只相符新手,老开车员如有宝贵意见请多提。

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

评释意见写得很清楚了,就不啰嗦了。

目录

  • 从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'}}>小编是第3个分界面</Text>
    <TextButton onPress={this._onPress} text={'点击跳回去'}/>
    </View>
    );
    }
    }

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

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

/**

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

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

    _onPress = () => {
    /**
    * 为啥这里能够拿到 props.navigator?请看下边包车型大巴App.js:
    * <Component {...route.params} navigator={navigator} />
    * 这里传递了navigator作为props
    */
    const {navigator} = this.props;

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

    };

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

/**

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

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

export default class SecondPage extends Component {

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

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

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

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

}

##效果图


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

从JavaScript中学习React

当你步向React的世界时,平日是使用用于运营React项目标 create-react-app。设置项目后,您将碰到以下React类组件:

JavaScript

import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( <div> <header> <img src alt="logo" /> <h1>Welcome to React</h1> </header> <p> To get started, edit <code>src/App.js</code> and save to reload. </p> </div> ); } } export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
  render() {
    return (
      <div>
        <header>
          <img src alt="logo" />
          <h1>Welcome to React</h1>
        </header>
        <p>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}
 
export default App;

能够说,React类组件大概不是最棒的起源。新手有大多事物须要消食,不必然是React:类语句,类格局和一而再三番两次。导入语句也只是在攻读React时增添了复杂。固然重要纽带应该是JSX(React的语法卡塔 尔(阿拉伯语:قطر‎,但常常具有的作业都须要解释。那篇文章应该发布全部的东西,一大半是JavaScript,而不用担忧React。

3.ES6 Classes 与 decorator

es6 classes语法,用decorator实现mixin。

注:decorator与Java中pre-defined annotation的分别是,decorator是应用在运作时的艺术。

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(卡塔 尔(英语:State of Qatar)卡塔 尔(英语:State of Qatar)用于读取(或写入卡塔 尔(阿拉伯语:قطر‎实例的多少。类的实例在类中表示为此指标,但实例外界仅钦赐给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(卡塔 尔(英语:State of Qatar)生命周期方法,因为该构件将是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,就能够引进越来越多的艺术,进而产生代码逻辑复杂,不易维护。

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

二、高阶组件

本文由澳门三合彩票发布于Web前端,转载请注明出处:假若你有别的别的不在列表中的内容,老车手如

关键词: