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

資料