详细React和node.js面试题

1.React15生命周期及各自的作用

组件在整个 ReactJS 的生命周期中，主要会经历这4个阶段：创建阶段、实例化阶段、更新阶段、销毁阶段。

1.创建阶段：
    该阶段主要发生在创建组件类的时候，即调用 React.createClass 时触发
    这个阶段只会触发一个 getDefaultProps 方法，该方法返回一个对象并缓存起来。然后与父组件指定的 props 对象合并，最后赋值给 this.props 作为该组件的默认属性。
2.实例化阶段：
该阶段主要发生在实例化组件类的时候，也就是该组件类被调用的时候触发。这个阶段会触发一系列的流程，按执行顺序如下：
    （1）.getInitialState：初始化组件的 state 的值。其返回值会赋值给组件的 this.state 属性。
    （2）componentWillMount：根据业务逻辑来对 state 进行相应的操作。
    （3）render：根据 state 的值，生成页面需要的虚拟 DOM 结构，并返回该结构。
    （4）componentDidMount：对根据虚拟 DOM 结构而生的真实 DOM 进行相应的处理。组件内部可以通过 ReactDOM.findDOMNode(this) 来获取当前组件的节点，然后就可以像 Web 开发中那样操作里面的 DOM 元素了。 
 3.更新阶段：
这主要发生在用户操作之后或者父组件有更新的时候，此时会根据用户的操作行为进行相应得页面结构的调整。这个阶段也会触发一系列的流程，按执行顺序如下：
     （1）componentWillReceiveProps：当组件接收到新的 props 时，会触发该函数。在改函数中，通常可以调用 this.setState方法来完成对 state 的修改。
     （2）shouldComponentUpdate：该方法用来拦截新的 props 或 state，然后根据事先设定好的判断逻辑，做出最后要不要更新组件的决定
     （3）componentWillUpdate：当上面的方法拦截返回 true 的时候，就可以在该方法中做一些更新之前的操作。
     （4）render：根据一系列的 diff 算法，生成需要更新的虚拟 DOM 数据。（注意：在 render 中最好只做数据和模板的组合，不应进行 state 等逻辑的修改，这样组件结构更加清晰）
     （5）componentDidUpdate：该方法在组件的更新已经同步到 DOM 中去后触发，我们常在该方法中做一 DOM 操作。
4.销毁阶段
     （1）这个阶段只会触发一个叫 componentWillUnmount 的方法。
     （2）当组件需要从 DOM 中移除的时候，我们通常会做一些取消事件绑定、移除虚拟 DOM 中对应的组件数据结构、销毁一些无效的定时器等工作。这些事情都可以在这个方法中处理。

2.react16生命周期及作用

1.组件初始化(initialization)阶段:
也就是以下代码中类的构造方法( constructor() ),Test类继承了react Component这个基类，也就继承这个react的基类，才能有render(),生命周期等方法可以使用，这也说明为什么函数组件不能使用这些方法的原因。
super(props)用来调用基类的构造方法( constructor() ), 也将父组件的props注入给子组件，功子组件读取(组件中props只读不可变，state可变)。而constructor()用来做一些组件的初始化工作，如定义this.state的初始内容。

import React, {
    Component } from 'react';

class Test extends Component {
   
  constructor(props) {
   
    super(props);
  }
}

2.组件的挂载(Mounting)阶段

此阶段分为componentWillMount，render，componentDidMount三个时期。
    (1).componentWillMount:
在组件挂载到DOM前调用，且只会被调用一次，在这边调用this.setState不会引起组件重新渲染，也可以把写在这边的内容提前到constructor()中，所以项目中很少用。
    (2).render:
根据组件的props和state（无两者的重传递和重赋值，论值是否有变化，都可以引起组件重新render） ，return 一个React元素（描述组件，即UI），不负责组件实际渲染工作，之后由React自身根据此元素去渲染出页面DOM。render是纯函数（Pure function：函数的返回结果只依赖于它的参数；函数执行过程里面没有副作用），不能在里面执行this.setState，会有改变组件状态的副作用。
    (3)componentDidMount:
组件挂载到DOM后调用，且只会被调用一次

3.组件的更新(update)阶段
  
此阶段分为componentWillReceiveProps，
shouldComponentUpdate，
componentWillUpdate，
render，
componentDidUpdate

   (1)componentWillReceiveProps(nextProps)
   
此方法只调用于props引起的组件更新过程中，参数nextProps是父组件传给当前组件的新props。但父组件render方法的调用不能保证重传给当前组件的props是有变化的，所以在此方法中根据nextProps和this.props来查明重传的props是否改变，以及如果改变了要执行啥，比如根据新的props调用this.setState出发当前组件的重新render

  (2)shouldComponentUpdate(nextProps, nextState)
  
此方法通过比较nextProps，nextState及当前组件的this.props，this.state，返回true时当前组件将继续执行更新过程，返回false则当前组件更新停止，以此可用来减少组件的不必要渲染，优化组件性能。

 (3)componentWillUpdate(nextProps, nextState)

此方法在调用render方法前执行，在这边可执行一些组件更新发生前的工作，一般较少用。
(4)render

根据组件的props和state（无两者的重传递和重赋值，论值是否有变化，都可以引起组件重新render） ，return 一个React元素（描述组件，即UI），不负责组件实际渲染工作，之后由React自身根据此元素去渲染出页面DOM。render是纯函数（Pure function：函数的返回结果只依赖于它的参数；函数执行过程里面没有副作用），不能在里面执行this.setState，会有改变组件状态的副作用。
(5)componentDidUpdate(prevProps, prevState)

此方法在组件更新后被调用，可以操作组件更新的DOM，prevProps和prevState这两个参数指的是组件更新前的props和state


4卸载阶段:
componentWillUnmount：

此方法在组件被卸载前调用，可以在这里执行一些清理工作，比如清楚组件中使用的定时器，清楚componentDidMount中手动创建的DOM元素等，以避免引起内存泄漏。

3.ComponentWillUnMount用来干啥

在组件被卸载并销毁之前立即被调用。在此方法中执行任何必要的清理，例如使定时器无效， 取消网络请求或清理在`componentDidMount`中创建的任何监听。

4.shouldComponentUpdate怎么优化的

shouldComponentUpdate函数是重渲染时render()函数调用前被调用的函数，它接受两个参数：nextProps和nextState，分别表示下一个props和下一个state的值。并且，当函数返回false时候，阻止接下来的render()函数的调用，阻止组件重渲染，而返回true时，组件照常重渲染。

5.componentReceiveProps什么情况下会调用

在生命周期的第一次render后不会被调用，但是会在之后的每次render中被调用 = 当父组件再次传送props。在react的update life cycle中，不得不提到 componentWillReceiveProps方法。 该方法在props被传递给组件实例时被调用

6.受控组件和非受控组件

受控组件
就形式上来说，受控组件就是为某个form表单组件添加value属性；非受控组件就是没有添加value属性的组件；，受控组件的形式如下形式：

    render:(
    return <input type="text" value=</