react总结杂烩2

一、cookie库

cookie的库有不少，网上选一款适合便可。

如:

　browser-cookies

地址:

https://www.npmjs.com/package/browser-cookies

二、高阶组件

高阶组件经过包裹被传入的React组件，通过一系列处理，最终返回一个相对加强的React组件，供其余组件调用。

1)基于属性代理的方式

它经过作一些操做，将被包裹组件的props和新生成的props一块儿传递给此组件，这称之为属性代理。

export default function withHeader(WrappedComponent) {
  return class HOC extends Component {
    render() {
      const newProps = {
        test:'hoc'
      }
      // 透传props，而且传递新的newProps
      return <div>
        <WrappedComponent {...this.props} {...newProps}/>
      </div>
    }
  }
}

2)基于反向继承的方式

这种方式返回的React组件继承了被传入的组件，因此它可以访问到的区域、权限更多，相比属性代理方式，它更像打入组织内部，对其进行修改。

export default function (WrappedComponent) {
  return class Inheritance extends WrappedComponent {
    componentDidMount() {
      // 能够方便地获得state，作一些更深刻的修改。
      console.log(this.state);
    }
    render() {
      return super.render();
    }
  }
}

资料

三、prop-types

建立的组件是能够复用的，因此咱们开发的组件可能会给项目组其余同事使用。但别人可能对这个组件不熟悉，经常会忘记使用某些属性，或者某些属性传递的数据类型有误。所以咱们能够在开发 React自定义组件时，能够经过属性确认来声明这个组件须要哪些属性。

资料

四、websoket

express与websoket须要注意链接到一块儿使用
写法:
const server = require('http').server(app)
const io = require('socket.io')(server)

前端使用要写具体的具体的ip加端口地址连接

五、react生命周期

jsx babel转换 React.createElement保存在内存中
虚拟DOM React.createElement保存DOM树，diff算法

    Initial render                                父组件render
        |                                            |
    constructor                           componentWillReceiveProps  
        |                                            |        
    componentWillMount                        shouldComponentUpdate    <- this.setState
        |                                            |
        |                                    componentWillUpdate       <- this.forceUpdate
        |                                            |
        ————————————————————— render ————————————————
        |                                            |
    componentDidMount                        componentDidUpdate
        |___________________________________________|                    
                                |
                        componentWillUnmount   组件卸载执行

shouldComponentUpdate(nextProps, nextState) 两个参数，能够定制渲染，当知足条件返回true就执行render渲染

this.setState 是队列机制而且是异步的，更新只会执行render更新一次

        全局context
    contextTypes = {
      color: React.PropTypes.string
    }
    
    而后经过getChildText方法，来给子context对象的属性赋值：
    getChildContext() {
        return {color: "purple"};
      }
    
    childContextTypes = {
      color: React.PropTypes.string
    };

六、react优化

事件this处理，在construct bind(this) 这样性能会比较好
传输数据时，尽量的减小数据的传输，只传有必要的数据

reactURL加?react_pert能够在chrome的性能面板直接查看，performance
由于每次数据的变化都会触发render，而优化可以使用shouldComponentUpdate决定渲染达到性能优化

若是组件是根据状态渲染，没有复杂的值变更，可使用React.PureComponent,他比shouldComponentUpdate更好一些，不会渲染没有变更状态的组件

数据结构不要太复杂，这回影响性能，由于react只会浅比较，深层的数据结构，只能认为数据变更，而后render

 

immutable
Immutable数据就是一旦建立，就不能更改的数据。每当对Immutable对象进行修改的时候，就会返回一个新的Immutable对象，以此来保证数据的不可变。

    优势：
    1、减小内存使用
    2、并发安全
    3、下降项目复杂度
    4、便于比较复杂的数据，定制shouldComponentUpdate方便
    缺点:
    1、学习成本
    2、库的大小
    三、对先有的项目入侵严重

    reselect性能优化
    Selector能够计算衍生的数据,可让Redux作到存储尽量少的state。
    Selector比较高效,只有在某个参数发生变化的时候才发生计算过程.
    Selector是能够组合的,他们能够做为输入,传递到其余的selector.
    
    数组遍历 key能够提升性能，由于key惟一标识符，但使用索引不能提升

    eslint 代码检查定制
    异步函数
    async+await 配合使用，await必须在async里使用，使用他们代码更加简单
    async (res)=>{
        const data = await axios.post(....)  //同步，须要等待它返回才往下走
        data....

    }
    

七、SSR:

首先咱们须要知道SSR对于SPA的好处，优点是什么。
更好的SEO（Search Engine Optimization），SEO是搜索引擎优化，简而言之就是针对百度这些搜索引擎，可让他们搜索到咱们的应用。这里可能会有误区，就是我也能够在index.html上写SEO，为何会不起做用。由于React、Vue的原理是客户端渲染，经过浏览器去加载js、css，有一个时间上的延迟，而搜索引擎不会管你的延迟，他就以为你若是没加载出来就是没有的，因此是搜不到的。
解决一开始的白屏渲染，上面讲了React的渲染原理，而SSR服务端渲染是经过服务端请求数据，由于服务端内网的请求快，性能好因此会更快的加载全部的文件，最后把下载渲染后的页面返回给客户端。

服务器端使用react 由于后台没有什么css之类的，因此使用使用钩子，css-modules-require-hook 这个包来兼容

asset-require-hook 处理服务器端没法加载图片错误的

node支持babel  须要安装babel-cli 在script里配置NODE_ENV=test nodemon --exec babel-node server.js

node中支持jsx，须要配置文件.babelrc

资料