render()笔记

  • render()笔记已关闭评论
  • 20 次浏览
  • A+
所属分类:Web前端
摘要

如果需要渲染多个HTML元素,则必须将它们组合在一个封闭标签中,例如<form>、<group>、<div>等。次函数必须保持纯洁,即每次调用时必须返回相同的结果。
在使用Mouse组件的时候,通过一个render属性,传递一个可用组件Cat给父组件Mouse,而在Mouse组件中,可以将本身的state对象传递给Cat组件,Cat组件中mouse属性的值与Mouse父组件中的state相同。


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

每个React组件都必须有一个render(),它返回一个React元素,它是原生DOM组件的表示方式。

如果需要渲染多个HTML元素,则必须将它们组合在一个封闭标签中,例如<form>、<group>、<div>等。次函数必须保持纯洁,即每次调用时必须返回相同的结果。
在使用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>     ) }