1.immutable

連續(xù)看了兩三篇關(guān)于immutable.js的文章，傳統(tǒng)的object和array等引用類型是mutable數(shù)據(jù)，就是當(dāng)賦值的時(shí)候，指向同個(gè)內(nèi)存，這在react更新機(jī)制里面就會(huì)出現(xiàn)個(gè)問題，引用是相同的，react purecomponent就會(huì)檢測(cè)不出前后兩個(gè)props的不同部分，就不會(huì)re-render,而React.Component是可以檢測(cè)出來(lái)props的更新的，然后就會(huì)re-render,比如一個(gè)組件的props改變（數(shù)據(jù)流是單向的）該組件的props改變只需要其對(duì)應(yīng)的父組件更新就可以了，不需要該組件的兄弟組件及其子組件更新，因?yàn)樵鷍s引用類型共享內(nèi)存，這些組件都會(huì)更新，這是我們不想看到的，所以引入了immutable.js共享部分內(nèi)存，把直接相關(guān)的節(jié)點(diǎn)更新就可以了。

Immutable.js 以及在 react+redux 項(xiàng)目中的實(shí)踐
react Performance Tools 入門
使用immutable優(yōu)化React

2. 模塊或者組件按需加載

React Loadable 簡(jiǎn)介
webpack 構(gòu)建性能優(yōu)化策略小結(jié)
react項(xiàng)目?jī)?yōu)化之webpack
react-router按需加載(V4版)

使用import()實(shí)現(xiàn)組件的按需加載

根據(jù)點(diǎn)擊的鏈接會(huì)在head標(biāo)簽里插入

發(fā)現(xiàn)個(gè)很有趣的現(xiàn)象，點(diǎn)擊About鏈接或者DashBoard鏈接兩個(gè)組件相互切換，在同個(gè)頁(yè)面的路由組件，路由切換的話，前面一個(gè)渲染好的組件會(huì)Unmount，即被卸載
例如路由about->dashboard，About組件會(huì)被卸載（componentWillUnmount被調(diào)用），DashBoard被裝載（componentWillMount被調(diào)用），

由下圖可以看出，路由導(dǎo)航到dashboard的時(shí)候About組件并沒有被包含在其Route組件里，也就是切換路由的時(shí)候About被卸載了，移出了dom

倉(cāng)庫(kù)：assassin / react-starter

參考：

在react-router4中進(jìn)行代碼拆分（基于webpack）
HTML5 <script>元素async,defer異步加載

3.試讀react-redux源碼

本文的react-redux代碼本版為5.0.6

阮一峰的Redux 入門教程（三）：React-Redux 的用法

class VisibleTodoList extends Component {
  componentDidMount() {
    const { store } = this.context;
    this.unsubscribe = store.subscribe(() =>
      this.forceUpdate()
    );
  }

  render() {
    const props = this.props;
    const { store } = this.context;
    const state = store.getState();
    // ...
  }
}

VisibleTodoList.contextTypes = {
  store: React.PropTypes.object
}

React-Redux自動(dòng)生成的容器組件的代碼，就類似上面這樣，從而拿到store
這句話不是很理解，對(duì)比了下官方給出的代碼：

import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_ALL':
      return todos
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed)
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed)
    default:
      throw new Error('Unknown filter: ' + filter)
  }
}

const mapStateToProps = (state) => ({
  todos: getVisibleTodos(state.todos, state.visibilityFilter)
})

const mapDispatchToProps = {
  onTodoClick: toggleTodo
}

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

和大神說(shuō)的自動(dòng)生成的容器組件的代碼完全不同，現(xiàn)在的理解應(yīng)該是connect以后得到的容器組件的代碼，而不是現(xiàn)在我們看到的官網(wǎng)的容器組件的代碼

今天看到了connectAdvanced.js的最后一句卡住了return hoistStatics(Connect, WrappedComponent)
import hoistStatics from 'hoist-non-react-statics'來(lái)自于hoist-non-react-statics具體干啥用的還不清楚，搜索它怎么用的時(shí)候發(fā)現(xiàn)了官網(wǎng)高階組件里面提到了這個(gè)庫(kù)，于是再次看了遍高階組件的用法，如是說(shuō)：高階組件是一個(gè)函數(shù)，能夠接受一個(gè)組件并返回一個(gè)新的組件，結(jié)合實(shí)際的react-redux的connect功能，

import TodoList from '../components/TodoList'
const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

connect.js

connect.js

connect.js調(diào)用了connectAdvanced.js
connectAdvanced.js

connectAdvanced.js

connect()(TodoList)返回的新組件

那么如果從高階組件的定義高階組件是一個(gè)函數(shù)，能夠接受一個(gè)組件并返回一個(gè)新的組件來(lái)看connectAdvanced.js中的wrapWithConnect函數(shù)就是高階組件，它接受了一個(gè)WrappedComponent組件返回了一個(gè)<Connect(TodoList)>...</Connect(TodoList)>新的組件

displayName其實(shí)是組件的一個(gè)靜態(tài)屬性，如果在組件中定義則有，否則不會(huì)有該屬性
靜態(tài)屬性在es6的不同版本有不同的定義方式：

export default class MainSection extends Component {
  static propTypes = {//先進(jìn)的一種
    todos: PropTypes.array.isRequired,
    actions: PropTypes.object.isRequired
  }
}
//原始的一種
MainSection.propTypes={
    todos: PropTypes.array.isRequired,
    actions: PropTypes.object.isRequired
}

到目前的理解，使用高階組件的目的有

• 抽取很多組件的公共方法和屬性，類似于之前的mixin
• 返回的新組件必須保留原始組件的功能（包括原始組件的靜態(tài)方法和靜態(tài)屬性）
  connectAdvanced.js

import hoistStatics from 'hoist-non-react-statics'

export default function connectAdvanced(){
  return function wrapWithConnect(WrappedComponent) {
    class Connect extends Component {
   }

    Connect.WrappedComponent = WrappedComponent
    Connect.displayName = displayName
    Connect.childContextTypes = childContextTypes
    Connect.contextTypes = contextTypes
    Connect.propTypes = contextTypes

    if (process.env.NODE_ENV !== 'production') {
    }

    return hoistStatics(Connect, WrappedComponent)//原始組件的所有靜態(tài)方法全部拷貝給新組件
  }
}
}

上下文(Context)
react-redux源碼分析
react-redux源碼分析
react-redux 源碼解析

一個(gè)有意思的發(fā)現(xiàn)：

class Animal{
  constructor(){
    this.age=""
  }
  showAge(){
    console.info(this.age)
  }
  getName=()=>{
    return "name"  
  }
}

使用ts編譯為js

var Animal = /** @class */ (function () {
    function Animal() {
        this.getName = function () {
            return "name";
        };
        this.age = "";
    }
    Animal.prototype.showAge = function () {
        console.info(this.age);
    };
    return Animal;
}());

4.高階組件的兩種實(shí)現(xiàn)方式

看這篇文章帶著三個(gè)問題一起深入淺出React高階組件的時(shí)候發(fā)現(xiàn)有個(gè)有趣的現(xiàn)象：父組件可以直接調(diào)用子組件的實(shí)例方法，這在Java中是不可能的，具體可查看Java 中父類怎么調(diào)用子類的方法？,這篇文章指出可以使用反射的方式，js真的不按套路出牌啊

深入理解 React 高階組件
React進(jìn)階之高階組件
React高階組件探究
React 高階組件(HOC)入門指南

5.木偶組件和智能組件

在 2017 年學(xué)習(xí) React + Redux 的一些建議（上篇）

react root組件下面應(yīng)該放什么組件？

6.按需加載 包括saga

react結(jié)合redux和react-router開發(fā)大型應(yīng)用實(shí)現(xiàn)按需加載（code spliting）
React Router v4 之代碼分割：從放棄到入門

7.在代碼提交之前需要對(duì)代碼進(jìn)行l(wèi)int和語(yǔ)法檢查

需要用到庫(kù)：
okonet/lint-staged
typicode/husky
prettier/prettier

從React腳手架工具學(xué)習(xí)React項(xiàng)目的最佳實(shí)踐（上）：前端基礎(chǔ)配置
前端開發(fā)如何讓持續(xù)集成/持續(xù)部署(CI/CD)跑起來(lái)

github 集成測(cè)試
前端開源項(xiàng)目持續(xù)集成三劍客

8.用js的方式改變子組件的props

import RadioButton from './radioButton'
children = React.Children.map(children, (child: any) => {
        if (child.type === RadioButton) {
          return React.cloneElement(child, {
            prefixCls: radioType === 'text' ? 'radio-text' : 'radio-button', //手動(dòng)改變了prefixCls props
          })
        } else {
          return child
        }
      })

React中props.children和React.Children的區(qū)別

9. 在生產(chǎn)環(huán)境中使用LogRocket記錄Redux日志