来自 计算机教程 2019-04-11 23:45 的文章
当前位置: 美洲杯冠军竞猜 > 计算机教程 > 正文

学习React之前你需要知道的的JavaScript基础知识美

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:创造一种类似多重继承的效果。事实上,说它是组合更为贴切。

目录

二、高阶组件

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('https://api.mydomain.com') .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('https://api.mydomain.com') .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库。

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中的Import 和 Export语句

幸运的是,JavaScript社区确定了使用JavaScript ES6的importexport

但是,对于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。您还可以导出和导入功能以测试它们。

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对象里的方法都挂载到原对象上,来实现对象的混入。

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

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之前你需要知道的的JavaScript基础知识

2018/07/25 · JavaScript · React

原文出处:

1.高阶函数:

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

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

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也可以看出它

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;

        }

    }

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扩展运算符 用于将其余对象转发到下一个组件的位置。在下一节中,您将看到此运算符的运行情况。

本文由美洲杯冠军竞猜发布于计算机教程,转载请注明出处:学习React之前你需要知道的的JavaScript基础知识美

关键词: