老司机如有宝贵意见请多提,更为贴切

时间:2019-11-07 04:01来源:美高梅游戏网站
React中的库 React只是应用程序的视图层。React提供了一些内部状态管理,但除此之外,它只是一个为您的浏览器呈现HTML的组件库。其他所有内容都可以从API(例如浏览器API,DOMAPI),J

React中的库

React只是应用程序的视图层。 React提供了一些内部状态管理,但除此之外,它只是一个为您的浏览器呈现HTML的组件库。其他所有内容都可以从API(例如浏览器API,DOM API),JavaScript功能或外部库中添加。选择合适的库来补充React应用程序并不总是很简单,但是一旦您对不同的选项有了很好的概述,就可以选择最适合您的技术堆栈的库。

例如,可以使用本机fetch API在React中获取数据:

JavaScript

import React, { Component } from 'react'; class App extends Component { state = { data: null, }; componentDidMount() { fetch('') .then(response => response.json()) .then(data => this.setState({ data })); } render() { ... } } export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React, { Component } from 'react';
 
class App extends Component {
  state = {
    data: null,
  };
 
  componentDidMount() {
    fetch('https://api.mydomain.com')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }
 
  render() {
    ...
  }
}
 
export default App;

但是你可以使用另一个库来获取React中的数据。 Axios是React应用程序的一个流行选择:

JavaScript

import React, { Component } from 'react'; import axios from 'axios'; class App extends Component { state = { data: null, }; componentDidMount() { axios.get('') .then(data => this.setState({ data })); } render() { ... } } export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React, { Component } from 'react';
import axios from 'axios';
 
class App extends Component {
  state = {
    data: null,
  };
 
  componentDidMount() {
    axios.get('https://api.mydomain.com')
      .then(data => this.setState({ data }));
  }
 
  render() {
    ...
  }
}
 
export default App;

因此,一旦您了解了需要解决的问题,React广泛而创新的生态系统应该为您提供大量解决方案 。这又不是关于React,而是了解所有可用于补充应用程序的不同JavaScript库。

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;

        }

    }

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

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

Robin   译文出处:[众成翻译

_小生_]()   

在我的研讨会期间,更多的材料是关于JavaScript而不是React。其中大部分归结为JavaScript ES6以及功能和语法,但也包括三元运算符,语言中的简写版本,此对象,JavaScript内置函数(map,reduce,filter)或更常识性的概念,如:可组合性,可重用性,不变性或高阶函数。这些是基础知识,在开始使用React之前你不需要掌握这些基础知识,但在学习或实践它时肯定会出现这些基础知识。

以下演练是我尝试为您提供一个几乎广泛但简明的列表,其中列出了所有不同的JavaScript功能,以补充您的React应用程序。如果您有任何其他不在列表中的内容,只需对本文发表评论,我会及时更新。

二、高阶组件

此文章只适合新手,老司机如有宝贵意见请多提。

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

一、mixin

什么是mixin:创造一种类似多重继承的效果。事实上,说它是组合更为贴切。

Home

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

    constructor(props) {
        super(props);
    }

    _onPress = () => {
        /**
         * 为什么这里可以取得 props.navigator?请看上面的App.js:
         * <Component {...route.params} navigator={navigator} />
         * 这里传递了navigator作为props
         */
        const { navigator } = this.props;

        if(navigator) {
            navigator.push({
                name: 'SecondPage',
                component: SecondPage,
            })
        }
    };

    render() {
        const {counter} = this.props;
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <Text>我是第一个界面</Text>
                <TextButton onPress={this._onPress} text={'点击跳转'}/>
            </View>
        );
    }
}

简单说一下,这里的页面就是简单的一个TextButton,点击事件里面onPress 先获取父页面传过来的navigator,判断到如果存在,那边就push跳转一个对面的页面,我这里写的是SecondPage。
哦,对,还有一个小细节,细心的同志估计看到我的onPress不用这样写

_onPress={ this._onPress.bind (this) }

或者这样写

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
        this._onPress = this._onPress.bind(this);
    }```
把方法直接作为一个arrow function的属性来定义,初始化的时候就绑定好了this指针
写了以后是这样的

_onPress = () => {
const {navigator} = this.props;
if (navigator) {
navigator.push({
name: 'SecondPage',
component: SecondPage,
})
}
};

没写是这样

_onPress(){
const {navigator} = this.props;
if (navigator) {
navigator.push({
name: 'SecondPage',
component: SecondPage,
})
}
};

大家对比一下就知道细节在哪里
简单封装一个TextButton

/**

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

/**

  • 简单封装一个Button

  • text:显示的内容

  • onPress:回调
    */
    export default class TextButton extends Component {

    constructor(props) {
    super(props);
    }

    render() {
    const {text, onPress} = this.props;

     return (
         <View>
             <TouchableOpacity onPress={onPress} style={styles.button}>
                 <Text>{text}</Text>
             </TouchableOpacity>
         </View>
     );
    

    }
    }

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

理解不了的请看注释

##SecondPage

/**

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

    _onPress = () => {
    const { navigator } = this.props;
    if(navigator) {
    /**
    * 感觉就像入栈出栈
    */
    navigator.pop();
    }
    };

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

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

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

/**

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

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

    _onPress = () => {
    /**
    * 为什么这里可以取得 props.navigator?请看上面的App.js:
    * <Component {...route.params} navigator={navigator} />
    * 这里传递了navigator作为props
    */
    const {navigator} = this.props;

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

    };

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

/**

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

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

export default class SecondPage extends Component {

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

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

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

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

}

##效果图


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

React中的模板文字

模板文字是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也可以看出它 。

4.mixin存在的问题

(1)破坏了原有组件的封装。

    mixin中的方法会带来新的state和props,及其他未知操作,在使用组件中不可知,无法有目的地控制。

(2)命名冲突。

    多个mixin中,或mixin与当前组件,可能存在相同命名的方法,从而命名冲突。

(3)增加复杂性。

    当添加了越来越多的mixin,就会引入越来越多的方法,从而造成代码逻辑复杂,不易维护。

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

3.ES6 Classes 与 decorator

es6 classes语法,用decorator实现mixin。

注:decorator与Java中pre-defined annotation的区别是,decorator是运用在运行时的方法。

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类组件的方式比其他版本更简洁。

1.高阶函数:

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

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

编辑:美高梅游戏网站 本文来源:老司机如有宝贵意见请多提,更为贴切

关键词: