美文网首页前端
react进阶-Fragments,portals,error

react进阶-Fragments,portals,error

作者: xhbisme | 来源:发表于2018-04-29 07:42 被阅读6次

Fragments:

    首先,个人觉得,如果代码结构和组件拆分合理的话,这个东西基本用不到。这个东西给人的感觉就是个空标签,还必须得手动传key。它设计的初衷是:

设计初衷

    这完全可以用map直接返回子节点。甚至不用Fragments包装,使用div或者其他标签也是可以的。


Portals:

    这里有必要说一个api:

    ReactDOM.createPortal(child,container)。

    这个api的作用是把child渲染到container节点上,实际上是提供了一套完整的挂载方案。另外,关于事件冒泡,需要注意的是:

冒泡

Error Boundaries:

api:componentDidCatch(error, info);

React的错误处理机制。相当于原生代码里的try/catch,但try/catch只能在命令式代码中使用,而react是声明式的。你需要知道预期渲染的东西,可以把它理解为生命周期,但事实上,它贯穿了组件的整个声明周期。

Render Props:

将子组件暴露给父组件的一种方法。

看上去像这样

在Props中, 我们可以传递数据,那如果我们传递一个组件,或者一个函数呢?react当然照样认识。基于这种特点,我们在属性中,传递一个函数,函数中去渲染一个组件。个人觉得是this.props.children的另外一种扩展形式。再者,我们经常这么干:

经常的做法

但这次,我们把this.aa方法暴露给了父组件,仅此而已。react用起来,就是这么简单。

相关文章

  • react进阶-Fragments,portals,error

    Fragments: 首先,个人觉得,如果代码结构和组件拆分合理的话,这个东西基本用不到。这个东西给人的感觉就是个...

  • React v16.0 发布了

    很多等待已久的特性: 包括: fragments, error boundaries, portals, 支持 c...

  • React入门系列二

    此篇为React入门(进阶)系列二,在这里将进一步学习React以及了解相关生态知识 Fragments Reac...

  • React进阶笔记11(Portals)

    Portals提供了一种能让子节点渲染到父组件之外的方式。 第一个参数(child)是任何可渲染的 React 子...

  • React进阶笔记10(Fragments)

    Fragments React中一个常见的模式就是为一个组件返回多个元素,Fragment可以聚合一些子元素的列表...

  • React Portals

    Protals用法: ReactDOM.createPortal(child, container) 看了官方文档...

  • React Fragments

    Fragments React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组,而...

  • React Fragments

    React的常见模式是一个组件返回一个子组件。如果要返回子元素列表,一般需要包括在一个标签内,例如返回table>...

  • Portals

    Portals React 16的Portals特性让我们可以把组件渲染到当前组件树以外的 DOM节点上,这个特性...

  • React 进阶目录

    React进阶(附录一)构建工具改造过程记录 React进阶(一)React进阶更新计划浅谈React进阶(二)为...

网友评论

    本文标题:react进阶-Fragments,portals,error

    本文链接:https://www.haomeiwen.com/subject/kncolftx.html