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..

怎么样，理解了吗？！