renderplot（render()笔记）

React中render()的目的是什么？

每个React组件都必须有一个render()    
    
    
    
 ，它返回一个React元素 


     


     


     


     ，它是原生DOM组件的表示方式
    
    
    
    
。

如果需要渲染多个HTML元素

 




 




 




 




，则必须将它们组合在一个封闭标签中   

   

   

   

，例如

    
    
    
    
 、 


     


     


     


     、

等     


     


     


     


 。次函数必须保持纯洁  

     

     

     

     ，即每次调用时必须返回相同的结果 




 




 




 




 。

在使用Mouse组件的时候


  




  




  




  



，通过一个render属性  


  


  


  


，传递一个可用组件Cat给父组件Mouse   
     
     
     
    ，而在Mouse组件中



   




   




   




   


，可以将本身的state对象传递给Cat组件 



 



 



 



，Cat组件中mouse属性的值与Mouse父组件中的state相同

   

   

   

   

。 简单来说：就是父组件可以将自己的state传递给子组件                      ，而子组件可以根据父组件的state对象来进行render     

     

     

     

。

这样做的好处是：

不用担心props的命名问题 可以溯源




    




    




    




    

，子组件的props一定是来自于直接父组件 是动态构建的 <Mouse render={mouse => ( <Cat mouse={mouse}/> )}/> render() { return ( <div> <ToggleRenderProps render={({on,toggle}) => ( <div> { on && <h1>Hey www</h1> } <button onClick={toggle}>隐藏 显示</button> </div> )}/> </div> ) }