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..
复制代码

怎么样，理解了吗？！