摘要：代替我們做了下面例子中函數做的事情相關鏈接使用內聯函數與傳遞的問題在中使用內聯函數在方法里面定義的函數并通過傳遞到子組件是很方便的，但是這樣用也會影響應用的性能。

這是react官方文檔推薦的方法(源代碼很少)
一般的state，例如層級比較淺的，可以直接用Object.assign或者...(擴展語法來解構)，但是在層級比較深，或者操作數組的情況下reducer寫起來就要麻煩些，這時候就可以用immutability helper的update方法了

//更新數組中的某一條數據
updatePurchaseDetail(state, { index, payload }) {
      return update(state, {
        purchaseDetails: {
          [index]: {
            $merge: payload
          }
        }
      })
    },

//向數組中添加一條數據 遵循不可變數據結構 我們不能直接用Push
addPurchaseLine(state, { item }) {
      return update(state, {
        purchaseDetails: {
          $push: [item]
        }
      })
    },

const collection = [1, 2, {a: [12, 17, 15]}];
const newCollection = update(collection, {
    2: {
      a: {
        $splice: [[1, 1, 13, 14]] // [1,1,13,14]對應于數組的splice函數的參數
      }
    }
  }
);
// => [1, 2, {a: [12, 13, 14, 15]}] 
// 在collection數組索引2的對象的a屬性的數組的索引1的位置插入13,14

react官方文檔中這樣介紹setState的

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

setState不會立即修改this.state,也就是說我們在調用setState的后，立即訪問this.state是不能取得最新的this.state的值的。這樣在一些特殊需求的時候可能會出現問題。但是我們可以通過使用setState回調函數的形式來使下面的代碼拿到最新的this.state的值。

updateState({target}) {
   this.setState(prevState => {
     const updatedUser = {...prevState.user, [target.name]: target.value}; // 使用先前的state來構建新的state的值
     doSomething(updatedUser); 
     return { user: updatedUser }; 
   });
 }

大家都知道使用好shouldComponentUpdate 可以優化性能，對props 和 state 的所有屬性進行比較來決定組件是否需要更新, 這個函數默認都是返回true,也就是說需要更新。當我們嚴格遵守不可變數據結構的時候，就可以繼承React.PureComponent來對props和state進行淺比較來決定組件是否應該更新，方便的優化我們組件的性能。PureComponent代替我們做了下面例子中shouldComponentUpdate函數做的事情.相關鏈接

class CounterButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }

  render() {
    return (
       this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      
    );
  }
}

在react中使用內聯函數（在render方法里面定義的函數,并通過props傳遞到子組件）是很方便的，但是這樣用也會影響應用的性能。
影響性能的原因主要有兩個
1.會經常觸發垃圾回收機制
2.一個內聯函數每次都是一個新的引用，也就是說每次都會觸發子組件的render函數（這個時候使用PureComponent就無效了）

class MyComponent extends React.Component {
  render() {
    const msg = "Hello " + this.props.user.name.first;
    return  this.props.onAlert(msg)} />;
    //另一種形式 this.props.onAlert.bind(this, msg)
  }
}

如何避免使用inline function
1.可以把數據綁定在元素上

...
//同一個函數需要處理多種情況的時候
handleClick = (ev) => {
  const { action } = ev.target.dataSet
  this.props.dispatch({
    type: "handleBpm",
    action
  })
}
...
  approve
  reject

2.把事件處理函數移到子組件

// 父組件
...
render () {
  const msg = "Hello " + this.props.user.name.first;
  return (
    
  )
}
// 子組件 PureChild
handleClick = () => {
  //do something
  const { onAlert, msg } = this.props;
  onAlert(msg)
}
...
render () {
  return (
    ...
    

  )
}

第二種方法需要我們在可以編碼子組件的情況下才可以做到
還有一種通過babel插件reflective-bind的方式可以參考
不只是內聯函數，我們在render函數里面應該盡可能少的聲明實例，盡量不把在render里生成的實例當做Props傳遞下去。

Container與Component的主要區別在于：

1.Container是跟全局狀態有關聯的，通常被用來管理數據并通過connect函數連接到全局state,幾乎不寫樣式
2.Component與樣式聯系緊密，但是不參與管理任何數據，只通過接收到的props響應數據更改

在dva中routes下面的文件目錄相當于containers,也就是說我們需要使用connect的組件就應該規劃在這里面。
component文件目錄就應該放置與全局state無關，可以復用的通用組件。

另外每一個文件夾的入口文件可以用index.js命名，這樣有兩個明顯的好處。第一點是可以讓閱讀代碼的人，一眼就知道在當前目錄下，哪個文件是入口文件。第二點是在其他文件Import目標文件的時候，只需要寫到folderName的位置就可以了。webpack會自動讀取當前文件目錄下的index文件。
例如import Home from routes/home 而不用寫成import Home from routes/home/index

關于react規范結構的問題 可以參考
how to scale react applications
react-boilerplate
Airbnb React 編碼規范