React

React并不是一个MVC框架，只是一个用于构建UI的javascript库。 React一般也叫React.js，起源于facebook，提倡用可重用的组件来表现随时间变化的数据。

1.React生命周期

组件挂载：

constuctor()
componentWillMount()
render()
componentDidMount()

组件更新：

componentWillReciveProps()
componentShouldUpdate(nextProps,nextState)
componentWillUpdate(nextProps,nextProps)
render()
componentDidUpdate(prevProps,prevState)

组件卸载:

componentWillUnMount()

2.React虚拟Dom

React render()执行后得到什么？？？得到的并不是真正的Dom节点，而是虚拟Dom。

Virtual DOM + Batching（批处理）+ Diff（算法）

Virtual DOM

虚拟dom实际上就是js画出来的一个画面，存在于内存。直接操作这个画出来的东西，不需要进行dom渲染，所以无论多么频繁操作虚拟dom，速度都很快。

Batching

将所有的DOM操作搜集起来，一次提交给真实DOM。

Diff（算法）

比较DOM虚拟节点树
1、节点类型不同	销毁节点，插入新节点
2、节点类型相同，属性不同	（对属性进行重设）
	在同一层	添加Key，插入或删除新节点
	不在同一层	销毁并重建

总结：diff算法对比之前的DOM树，得出变化

batching将变化提交给真实DOM

3、路由

React是单页面开发，使用React-Router 实现路由跳转

我们知道window对象的location对象有以下属性：

Location{
    hash:""
    host:"localhost:4000"
    hostname:"localhost"
    href:"http://localhost:4000/2016/02/01/list.html"
    origin:"http://localhost:4000"
    pathname:"/2016/02/01/list.html"
    port:"4000"
    protocol:"http:"
    search:""
}

其中hash的定义是url改变该部分不会影响页面重新加载的部分，所以我们知道可以用hash来实现单页面的路由跳转。

要实现无刷新跳转还可以用 HTML5 的 History API

总结以上两种方法就是react实现路由跳转的两种方式：

hashHistory 和 browserHistory

hashHistory 	url带#
browserHistory 	需要server 端配置

4、React性能

一、减少render() 执行次数

比如父组件更新导致子组件不必要的更新，在shouldComponentUpdate（）中操作。

二、使用immutable.js

5、高阶组件

1、定义

Concretely, a higher-order component is a function that takes a component and returns a new component.

具体来说，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。 2、eg：Redux

####6、setState实现机制

1、组件每次调用都是调用的React根组件的原型方法setState。 2、setState会依次引发组件更新生命周期函数调用。 3、react 框架为了提高性能，会对 state 的更新进行收集、合并、再进行一次批量的状态更新 4、setState 会合并更新，可能会造成状态更新的丢失

handleClick = () => { this.setState({demo: this.state.demo + 1}); this.setState({demo: this.state.demo + 1}); } //click 之后 demo 为2而不是3

综上：在同一代码块中不要多次调用 this.setState 方法

5、解决setState不会立即更新的办法

传入一个方法，返回你对state处理后的对象。而不是直接传入一个对象

7、react单页面优化

如何分包加载或者按需加载？

webpack 分包加载

8、ssr

react中间件

React并不是一个MVC框架，只是一个用于构建UI的javascript库。 React一般也叫React.js，起源于facebook，提倡用可重用的组件来表现随时间变化的数据。

1、高阶函数

1、定义

Concretely, a higher-order component is a function that takes a component and returns a new component.

具体来说，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。 2、example

高阶组件
import React, { Component } from 'react';

const DropHoc = WrappedComponent => {

    return class extends Component {
        render() {
            return <WrappedComponent />
        }
    };
};
export default DropHoc;

被包裹组件
import React from 'react';
import DropHoc from '../../common/DropHOC';
class StatInfo extend React.component{
  constructor(props){
  super(props);
    this.state = {
      
    }
  }
  render(){
    return  (
    	<div className="stationHome"></div>
    )
  }
}
export  default DropHoc(StatInfo);

3、绝大多数的使用场景-react库，比如redux

Redux

2、context

1、定义：一组属性的集合，并被_隐式_地传递给后代组件。

props：也是传递属性的集合

区别：不需要层层传递的空间穿越通道 - Context

2、用法

1、要传递context的组件的childContextTypes必须声明
2、通过getChildContext指定子组件能调用的值
3、指定子组件的contextTypes

//父组件
class Father extends React.Component( {
	constructor(){
      this.state = {
        userConfig:{
          userName:'xiaohua'
        }
      }
	}
    childContextTypes: {
       userConfig: PropTypes.object.isRequired    // childContextTypes必须声明  
    } ,
    getChildContext(){
        return {
            userConfig: userConfig
        }
    } ,
    render(){
        return ( <div className="app_main">
                    <Child></Child>
                </div> ) ;
    }
} ) ;

//子组件
class Child extends React.Component {
   static contextTypes = {
        userConfig: PropTypes.object.isRequired    // 子组件的contextTypes 
   }
   render(){
      console.log( this.context.userConfig )    // 拿到了对象
      return ( <div>child</div> ) ;
   }
}

版本注意：

从 React v15.5 开始，React.PropTypes 助手函数已被弃用，我们建议使用 prop-types 库来定义contextTypes。