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

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

一、mixin

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

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组件。

1.高阶函数:

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

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

目录

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基础知识

2018/07/25 · JavaScript
· 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会智能地将它们合并起来执行。

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,就会引入越来越多的方法,从而造成代码逻辑复杂,不易维护。

Robin   译文出处:[众成翻译

_小生_](https://www.zcfy.cc/article/javascript-fundamentals-before-learning-react)   

在我的研讨会期间,更多的材料是关于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对象里的方法都挂载到原对象上,来实现对象的混入。

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中的三目运算符

如果要在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特定的任何内容。

3.ES6 Classes 与 decorator

es6 classes语法,用decorator实现mixin。

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

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