React踩坑筆記 —— React

• Webpack提供了本身的導入方式require.include，但同時也支持commonjs規範或AMD規範的require語法，而Node.js使用的就是common.js，ES6的語法Import也會被Babel轉化成commonjs格式或者是AMD格式。
• ES六、CommonJS的導入是單例的；
• 單頁應用默認直接加載出全部import的資源，因此：
  • JS中的全局調用和表達式總會一開始就被執行，可使用require()/import()語法實現動態加載、按需加載。能夠配合Lazy(https://reactjs.org/docs/code-splitting.html#reactlazy)實現React組件懶加載 —— Lazy的原理即Promise+高階組件，在組件異步加載完成後將解析值賦值給全局對象。
  • CSS樣式可能會被覆蓋。
• 一句話理解react：事件\樣式\選擇器，只屬於真實的DOM元素，Components最終被渲染成真實DOM。
• 在重用社區或自定義組件的時候，若是組件沒有給出樣式配置的鉤子（Hooks），那麼咱們能夠在瀏覽器調試工具中，先找出指定元素的選擇器，而後去覆蓋先前樣式（Style）。
• 在Props和State發生改變的時候，組件會發生更新，至於如何被更新，能夠查看「差分算法」；
• 組件生命週期： 掛載、卸載發生在頁面加載和路由，更新發生在Props或State改變後；
• 受控組件： 像表單元素這樣的，有狀態，並將狀態控制權交給React的元素稱爲受控組件，受控組件必須知足兩個條件：① 表單元素；② 狀態被React控制（顯式的value屬性）。因此若是你又想給出默認值又不想將表單元素變成受控組件，請使用defaultValue給出默認值；
• 使用JSX語法的JS文件必須導入React ---- import React from 'react';
• {}相似於eval()、模板引擎、JS``模板變量，先執行（執行模板中的表達式或調用）再渲染（將表達式運行的結果渲染出來），因此要特別注意{}中須要的是函數仍是函數調用()。
• 使用Node.js（服務端）的包在瀏覽器編譯，會發生錯誤， 因此在npm install時要注意包的使用環境。 Failed to compile Module not found: Can't resolve 'XXX' in 'xxx.lib'

  

• Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. 函數做爲React子函數無效。 若是從render props中返回{Component}而不是<Component />，則可能會發生這種狀況。 或許你打算調用這個函數而不是返回它。
• React.Children.only expected to receive a single React element child.，某個組件能夠經過PropTypes做類型檢查，限制屬性類型

  MyComponent.propTypes = {
   children: PropTypes.element.isRequired
  };
  複製代碼

• 在redux中使用combineReducers時要注意其實現原理 —— 相似於以下代碼： 通常實現：

  const chatReducer = (state = defaultState, action = {}) => {
  return {
     chatLog: chatLog(state.chatLog, action),
     statusMessage: statusMessage(state.statusMessage, action),
     userName: userName(state.userName, action)
    }
  };
  複製代碼

  combineReducers實現

  const combineReducers = reducers => {
  return (state = {}, action) => {
    return Object.keys(reducers).reduce(
      (nextState, key) => {
        nextState[key] = reducers[key](state[key], action);
        return nextState;
      },
      {} 
     );
   };
  };
  複製代碼

  不管是針對哪一個屬性拆分出來的子reducer，在任意dispatch發生時，都會被執行，因此定義subReducer時要注意在內部根據action.type來判斷執行路徑，若是這種type的action不會影響subReducer對應的state.key，那麼必定要直接返回該state.key。