前端面试题:1.ES6的新特性；2.Koa 与 Express 比较；3.什么是服务端渲染，服务端渲染的优点；4.React 组件间信息传递

---

简述ES6的新特性

es6和js的关系
ES全称ECAMScript,它是js基础构建的一种语言
js正是建立在es语言的基础规范中使用的
es是语言层面的东西,它只是定义了JavaScript以及在它基础之上建立的其他语言的语法规范
JavaScript包括 ECAMScript、DOM、BOM三个组成部分

es6新特性的分类
1.解决原有语法上的不足
比如let和const的块级作用域
2.对原有语法进行增强
比如解构,展开,参数默认值,模板字符串
3.全新的对象,全新的方法,全新的功能
比如promise.proxy,object,is
4.全新的数据类型和数据结构
比如symbol,set,map

Koa 与 Express 比较

express框架是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，主要基于 Connect 中间件，并且自身封装了路由、视图处理等功能。

koa是 Express 原班人马基于 ES6 新特性重新开发的框架，主要基于 co 中间件，框架自身不包含任何中间件，很多功能需要借助第三方中间件解决，但是由于其基于 ES6 generator 特性的异步流程控制，解决了 “callback hell” 和麻烦的错误处理问题。

相同点
两个框架都对http进行了封装。相关的api都差不多，同一批人所写。

不同点
express内置了许多中间件可供使用，而koa没有。
express包含路由，视图渲染等特性，而koa只有http模块。
express的中间件模型为线型，而koa的中间件模型为U型，也可称为洋葱模型构造中间件。
express通过回调实现异步函数，在多个回调、多个中间件中写起来容易逻辑混乱。

总结

Express
优点：线性逻辑，通过中间件形式把业务逻辑细分、简化，一个请求进来经过一系列中间件处理后再响应给用户，清晰明了。
缺点：基于 callback 组合业务逻辑，业务逻辑复杂时嵌套过多，异常捕获困难。

Koa
优点：首先，借助 co 和 generator，很好地解决了异步流程控制和异常捕获问题。其次，Koa 把 Express 中内置的 router、view 等功能都移除了，使得框架本身更轻量。
缺点：社区相对较小。

什么是服务端渲染，服务端渲染的优点

服务端渲染：页面渲染过程是在服务端完成，最终的HTML字符串，直接通过请求发送给客户端
简单理解是将组件或页面通过服务器生成html字符串，再发送到浏览器，当用户第一次请求页面时，客户端拿到手的，是可以直接渲染然后呈现给用户的 HTML 内容，不需要为了生成 DOM 内容自己再去跑一遍 JS 代码。

优点：
首屏渲染快
利于SEO
可以生成缓存片段，生成静态化文件

缺点:
服务端压力较大
开发条件受限
学习成本相对较高

React 组件间信息传递

组件传递的方式有很多种，根据传送者和接收者可以分为如下：
●父组件向子组件传递
●子组件向父组件传递
●兄弟组件之间的通信
●父组件向后代组件传递
●非关系组件传递

父组件向子组件传递

由于React的数据流动为单向的，父组件向子组件传递是最常见的方式

父组件在调用子组件的时候，只需要在子组件标签内传递参数，子组件通过props属性就能接收父组件传递过来的参数

function EmailInput(props) {
  return (
    <label>
      Email: <input value={props.email} />
    </label>
  );
}

const element = <EmailInput email="[e-mail]" />;

子组件向父组件传递

子组件向父组件通信的基本思路是，父组件向子组件传一个函数，然后通过这个函数的回调，拿到子组件传过来的值
父组件对应代码如下：

class Parents extends Component {
  constructor() {
    super();
    this.state = {
      price: 0
    };
  }

  getItemPrice(e) {
    this.setState({
      price: e
    });
  }

  render() {
    return (
      <div>
        <div>price: {this.state.price}</div>
        {/* 向子组件中传入一个函数  */}
        <Child getPrice={this.getItemPrice.bind(this)} />
      </div>
    );
  }
}

子组件对应代码如下：

class Child extends Component {
  clickGoods(e) {
    // 在此函数中传入值
    this.props.getPrice(e);
  }

  render() {
    return (
      <div>
        <button onClick={this.clickGoods.bind(this, 100)}>goods1</button>
        <button onClick={this.clickGoods.bind(this, 1000)}>goods2</button>
      </div>
    );
  }
}

兄弟组件之间的通信

如果是兄弟组件之间的传递，则父组件作为中间层来实现数据的互通，通过使用父组件传递

class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {count: 0}
  }
  setCount = () => {
    this.setState({count: this.state.count + 1})
  }
  render() {
    return (
      <div>
        <SiblingA
          count={this.state.count}
        />
        <SiblingB
          onClick={this.setCount}
        />
      </div>
    );
  }
}

父组件向后代组件传递
父组件向后代组件传递数据是一件最普通的事情，就像全局数据一样
使用context提供了组件之间通讯的一种方式，可以共享数据，其他数据都能读取对应的数据
通过使用React.createContext创建一个context

const PriceContext = React.createContext('price')

context创建成功后，其下存在Provider组件用于创建数据源，Consumer组件用于接收数据，使用实例如下：
Provider组件通过value属性用于给后代组件传递数据：

<PriceContext.Provider value={100}>
</PriceContext.Provider>

如果想要获取Provider传递的数据，可以通过Consumer组件或者或者使用contextType属性接收，对应分别如下：

class MyClass extends React.Component {
  static contextType = PriceContext;
  render() {
    let price = this.context;
    /* 基于这个值进行渲染工作 */
  }
}

Consumer组件：

<PriceContext.Consumer>
    { /*这里是一个函数*/ }
    {
        price => <div>price：{price}</div>
    }
</PriceContext.Consumer>

非关系组件传递

如果组件之间关系类型比较复杂的情况，建议将数据进行一个全局资源管理，从而实现通信，例如redux。

总结

由于React是单向数据流，主要思想是组件不会改变接收的数据，只会监听数据的变化，当数据发生变化时它们会使用接收到的新值，而不是去修改已有的值
因此，可以看到通信过程中，数据的存储位置都是存放在上级位置中