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

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

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

//向數(shù)組中添加一條數(shù)據(jù) 遵循不可變數(shù)據(jù)結(jié)構(gòu) 我們不能直接用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]對應(yīng)于數(shù)組的splice函數(shù)的參數(shù)
      }
    }
  }
);
// => [1, 2, {a: [12, 13, 14, 15]}] 
// 在collection數(shù)組索引2的對象的a屬性的數(shù)組的索引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,也就是說我們在調(diào)用setState的后，立即訪問this.state是不能取得最新的this.state的值的。這樣在一些特殊需求的時候可能會出現(xiàn)問題。但是我們可以通過使用setState回調(diào)函數(shù)的形式來使下面的代碼拿到最新的this.state的值。

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

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

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中使用內(nèi)聯(lián)函數(shù)（在render方法里面定義的函數(shù),并通過props傳遞到子組件）是很方便的，但是這樣用也會影響應(yīng)用的性能。
影響性能的原因主要有兩個
1.會經(jīng)常觸發(fā)垃圾回收機制
2.一個內(nèi)聯(lián)函數(shù)每次都是一個新的引用，也就是說每次都會觸發(fā)子組件的render函數(shù)（這個時候使用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.可以把數(shù)據(jù)綁定在元素上

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

2.把事件處理函數(shù)移到子組件

// 父組件
...
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的方式可以參考
不只是內(nèi)聯(lián)函數(shù)，我們在render函數(shù)里面應(yīng)該盡可能少的聲明實例，盡量不把在render里生成的實例當(dāng)做Props傳遞下去。

Container與Component的主要區(qū)別在于：

1.Container是跟全局狀態(tài)有關(guān)聯(lián)的，通常被用來管理數(shù)據(jù)并通過connect函數(shù)連接到全局state,幾乎不寫樣式
2.Component與樣式聯(lián)系緊密，但是不參與管理任何數(shù)據(jù)，只通過接收到的props響應(yīng)數(shù)據(jù)更改

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

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

關(guān)于react規(guī)范結(jié)構(gòu)的問題 可以參考
how to scale react applications
react-boilerplate
Airbnb React 編碼規(guī)范