react 的一些知识储备_react储备技术-优快云博客

本文链接：https://blog.youkuaiyun.com/yangchunshang/article/details/80506870

一、什么是ant design

ant design是一款开发和服务于企业级后台的产品。由蚂蚁金服开发，基本上的能想到的页面交互都可以用ant design来实现，大大降低了页面的开发成本。组件部分是ant design最大的亮点，丰富的组件提供了覆盖大部分应用场景的能力。总之，对于一个没有用过其它框架，只使用过几个月的 ant design的人来说是一个很不错的框架。

Ant Design团队也有推出其他相关的项目AntV／Ant UX | The Sitemap Template／Ant Motion - 一个 React 的动效设计解决方案，涵盖原型设计、动效设计、数据可视化等，都非常精彩。

二、JavaScript语言

变量声明不要使用var，而是用const和let,分碑额表示常量和变量。不同于var的函数作用域。const和let都是块级作用域。所谓块级作用域即指一对花括号｛｝括起来的部分即为一个块级作用域。（想起4月份面试网易时，面试官问我的问题，我的回答---就是一个块（233333333捂脸~~~~~~~））

如：const DELAY = 1000;

let count= 0;

count = count +1;

模版字符串模板字符串提供了另一种做字符串组合的方法。

const user ='world'; console.log('hello ${user}‘)；//hello world

默认参数

对于函数提倡使用箭头函数函数的快捷写法，不需要通过function 关键字创建函数，并且还可以省略return关键字。同时，箭头函数还会继承当前上下文的this关键字。
如:

注意！！！！：对于箭头函数来处理由object.method()语法调用的方法。因为它们会接收到来自调用者的this值。

其它场合都适用箭头函数。

关于模块的import 和export

import用于引入模块，export用于导出模块。

如：

ES6对象和数组

（1）析构赋值析构赋值让我们从Object或Array里面取部分数据存为变量。

//对象

const user={name:'guanguang',age:2};

const{name,age} = user;

console.log('${name}:${age}');

//数组

const arr =[1,2];

const [foo,bar] = arr;

console.log(foo);

关于析构也可以传入函数参数：

const add =(state,{playload})=>{

return state.concat(payload);

};

析构时还可以配alias，让代码更具有语义。

const add =(state,{palyload:todo}) =>{

return state.concat(todo);

}

对象字面量改进

这是析构的反向操作，用于重新组织一个Object。

定义对象方法时，还可以省去function 关键字。

...三个点几种不同的意思不同的用法。

（1）表示展开运算符(spread operator),其作用是和字面意思一样，即把东西展开。可以再array数组和object上使用。

几种不同的组装数组的方法：

A、用于组装数组。

B、用于获取数组的部分项。

C、收集函数参数为数组。

D、代替apply

E、对于Object 而言，可以组合成新的Object。

F、再JSX中 Spread Operator 还可以扩展props.

(2)作为剩余操作符（rest operator），是解构的一种，意思就是把剩余的东西放到一个Array里面赋值。

一般针对于array里面的赋值解构。

或

当遇到长度不匹配时

Promises

使用Promise用于更优雅地处理异步请求。promise是ES6中的最重要的特性之一。

（1）then()方法

then方法就是把原来的回调方法分离出来，在异步操作执行完后，用链式调用的方式执行

回调函数。而promise的优势在于这个链式调用。我们可以再then方法中继续写Promise对象并返回，然后继续调用then来进行操作。

一个例子：

（2）reject()方法

我们通过resolve()方法把promise的状态置为完成态（resolved）,这时then方法就能捕捉到变化，并且执行成功状态。而reject()方法就是把promise的状态置为已失败（rejected）。这时 then 方法执行“失败”情况的回调（then 方法的第二参数）

（3）catch方法

它可以和then的第二个参数一样，用来指定reject的回调。和当执行resolved 回调时，如果抛出了异常，那也不会报错卡死js，而是会进到catch方法中。

（4）all() 方法

promise的all方法提供了并行执行异步操作的能力，并且再所有异步操作执行完后才执行回调。

如之下的例子：all会把所有异步操作的结果放进一个数组中传给then。

（5）race()方法

race用法和all一样，只不过all是等所有异步操作都执行完毕后才执行then回调。而race只要有一个异步操作执行完毕，就立刻执行回调。注意：其它没有执行完毕的异步操作仍然会继续执行，而不是停止。

利用race的这个特性：race可以用再给某个请求设置超时时间，并且在超时后执行相应的操作。

如：

关于react组件定义的方式：三种

（1)无状态函数组件

对于无状态式组件，它是最早开始出现的创建组件的方法，只是为了创建纯展示组件，这种组件只负责传入的props

来展示，不涉及到要state状态的操作。

官方指出：在大部分React代码中，大多数组件被写成无状态的组件，通过简单组合可以构建成其他组件。

具体创建形式如下：

几个显著的特点：

1)组件不会被实例化，整体渲染性能得到提升。

组件被精简成一个render方法的函数来实现。由于无状态组件，所以不会有实例化过程，也就不需要分配多余内存，从而性能你得到一定的提升。

2)组件不能访问this对象

3）组件无法访问生命周期的方法

4）无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用。

（2）React.createClass :具体实现如下：

与无状态组件相比，React.createClass 和后面要描述的React.Component都是创建有状态的，并且可以访问组件的生命周期方法。其具有以下特点：

1）React.createClass会自动绑定函数方法(不像React.Component只绑定需要关心的函数）导致不必要的性能开销，增加代码过时的可能性。

（3）React.Component

是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，相对于

React.createClass可以实现代码的复用。

React.createClass与React.Component区别

1)函数this自绑定

在react.createClass中，每一个成员函数的this都有react自动绑定。任何时候使用this都会被正确设置。

而在react.Component里面，创建的组件，其成员函数并不会自动绑定this，需要开发者手动绑定，否则this不能获取当前组件实例对象。

三种手动绑定方法：

可以在构造函数中完成绑定，也可以在调用时使用method.bind(this)来完成绑定，还可以使用arrow function来绑定。

组件属性类型propTypes及其默认props属性defaultProps配置不同

React.createClass在创建组件时，有关组件props的属性类型及组件默认的属性会作为组件实例的属性来配置，其中defaultProps是使用getDefaultProps的方法来获取默认组件属性的

const TodoItem = React.createClass({
    propTypes: { // as an object
        name: React.PropTypes.string
    },
    getDefaultProps(){   // return a object
        return {
            name: ''    
        }
    }
    render(){
        return <div></div>
    }
})

React.Component在创建组件时配置这两个对应信息时，他们是作为组件类的属性，不是组件实例的属性，也就是所谓的类的静态属性来配置的。对应上面配置如下：

class TodoItem extends React.Component {
    static propTypes = {//类的静态属性
        name: React.PropTypes.string
    };

    static defaultProps = {//类的静态属性
        name: ''
    };

    ...
}

组件初始状态state的配置不同

React.createClass创建的组件，其状态state是通过getInitialState方法来配置组件相关的状态；
React.Component创建的组件，其状态state是在constructor中像初始化组件属性一样声明的。

const TodoItem = React.createClass({
    // return an object
    getInitialState(){ 
        return {
            isEditing: false
        }
    }
    render(){
        return <div></div>
    }
})

class TodoItem extends React.Component{
    constructor(props){
        super(props);
        this.state = { // define this.state in constructor
            isEditing: false
        } 
    }
    render(){
        return <div></div>
    }
}

Mixins的支持不同

Mixins(混入)是面向对象编程OOP的一种实现，其作用是为了复用共有的代码，将共有的代码通过抽取为一个对象，然后通过Mixins进该对象来达到代码复用。具体可以参考React Mixin的前世今生。

React.createClass在创建组件时可以使用mixins属性，以数组的形式来混合类的集合。

var SomeMixin = {  
  doSomething() {

  }
};
const Contacts = React.createClass({  
  mixins: [SomeMixin],
  handleClick() {
    this.doSomething(); // use mixin
  },
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
});