React pattern決定水平：高手在用Render Callback

React很難，尤爲對於新手。

緣由是設置和邏輯比較隨意，並且這麼多年出現了不少Pattern，新手通常不會研究什麼pattern，能寫就行。可是高手通常很注重pattern,好比比HOC還要聰明的，還要高級的，還要很差理解的是有高手發明的： Render Callback

1. Render Callback顧名思義就是在Render一個Component的時候調用Callback一些函數或參數。
2. 好處是：徹底分離邏輯和界面。Seperation of concern是程序員的追求。
3. Redux的邏輯也是相似，把界面和邏輯分開。即把修改和操做State放在component外面。

一：提煉下Render Callback的模式pattern

Step1：構造Stateless無狀態Functional COMP(由於他不用關心State，純粹表現presentational component)。

Let PureComponent=(props)=>{
    return (
      <StateComponent ownProps="" passProps={props}>
      { //parse
          (passState)=>{
            return (//render things...
          {passState.loading && <h2>Laoding..</h2>}
            .......
            )
          }
      }
      </StateComponent>
    )
}

複製代碼

即：能夠簡寫shorthand（注意()）

Let PureComponent=(props)=> (
      <StateComponent ownProps="" passProps={props}>
      { //parse
          (passedState,passedMethod)=>      (//render things...
          <div>
          {passedState.loading && <h2>Laoding..</h2>}
         <button onClick={passedMethod.toggle}/>    
            .......
             </div>
            )
          
      }
      </StateComponent>
    )

複製代碼

Step2：構造Statefull Component, 即Class Component（由於必需State）。

Class StateComponet extends Component{
     state:{
         show:false,
     };
     
     toggle=()=>{ 
        this.setState(
         prevState=>({ 
             show:!prevState.show
         })
        )
     };
     
     render(){
       return(
         this.props.children(
         this.state, {
           toggle:this.toggle
           ....
         }
         }
         )
       )
     };

複製代碼

注意：爲確保能更新，這裏用了setState updater: (prevState, prevProps) => stateChange

另外注意：參數順序相反componentDidUpdate(prevProps, prevState, snapshot)

二：跟Redux模式和邏輯對比下

Redux的思路是：

1. component仍是Class component由於須要操做state和componentDidMount，若是僅僅是stateless的component則不要redux。
2. 即至關於把State仍是保留在Component內部，可是State和操做State的handler放到了Redux裏面。
3. 同上Redux基本上是把兩者合併了，且僅僅把邏輯提出來了，看看Redux寫法：

Class ReduxComponet extends Component{
     state:{
         //State僅僅是本地localstate，
         //其餘State在Redux
     };
     
     toggle=()=>{ 
         this.props.passedActionFromRedux(...);
         //操做也在redux
     };
     
     render(){
       return(
         <h2>{this.passedReduxState.show}..</h2>}
         <button onClick={this.toggle}/>  
       )
     };

...MapStateToProps..
...MapReduxAction..
複製代碼

怎麼樣，理解了嗎？！