资讯专栏INFORMATION COLUMN

精读《编写有弹性的组件》

sunsmell / 920人阅读

摘要:引言读了精读完全指南之后,是不是对的理解又加深了一些呢这次通过一文,了解一下什么是有弹性的组件,以及为什么可以做到这一点。总结了弹性组件具有的四个特征不要阻塞数据流。不要有单例组件。以上规则不仅适用于,它适用于所有组件。

1. 引言

读了 精读《useEffect 完全指南》 之后,是不是对 Function Component 的理解又加深了一些呢?

这次通过 Writing Resilient Components 一文,了解一下什么是有弹性的组件,以及为什么 Function Component 可以做到这一点。

2. 概述

相比代码的 Lint 或者 Prettier,或许我们更应该关注代码是否具有弹性。

Dan 总结了弹性组件具有的四个特征:

不要阻塞数据流。

时刻准备好渲染。

不要有单例组件。

隔离本地状态。

以上规则不仅适用于 React,它适用于所有 UI 组件。

不要阻塞渲染的数据流

不阻塞数据流的意思,就是 不要将接收到的参数本地化, 或者 使组件完全受控

在 Class Component 语法下,由于有生命周期的概念,在某个生命周期将 props 存储到 state 的方式屡见不鲜。 然而一旦将 props 固化到 state,组件就不受控了:

class Button extends React.Component {
  state = {
    color: this.props.color
  };
  render() {
    const { color } = this.state; //            
               
                                           
                       
                 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109269.html

相关文章

  • 精读《怎么用 React Hooks 造轮子》

    摘要:可以看到,这样不仅没有占用组件自己的,也不需要手写回调函数进行处理,这些处理都压缩成了一行。效果通过拿到周期才执行的回调函数。实现等价于的回调仅执行一次时,因此直接把回调函数抛出来即可。 1 引言 上周的 精读《React Hooks》 已经实现了对 React Hooks 的基本认知,也许你也看了 React Hooks 基本实现剖析(就是数组),但理解实现原理就可以用好了吗?学的是...

    Shihira 评论0 收藏0
  • 精读《Serverless 给前端带来了什么》

    摘要:前端框架总是带入后端思维,而则是把前端思维带入了后端运维。前端同学对应该尤为激动。而带来了进一步优化的空间。当服务器面临攻击重启磁盘故障时,打开复杂的工作台或登陆后一通操作才能恢复。 1. 引言 Serverless 是一种 无服务器架构,让用户无需关心程序运行环境、资源及数量,只要将精力 Focus 到业务逻辑上的技术。 现在公司已经实现 DevOps 化,正在向 Serverles...

    wizChen 评论0 收藏0
  • 精读《Function VS Class 组件

    摘要:未来可能成为官方之一。讨论地址是精读组件如果你想参与讨论,请点击这里,每周都有新的主题,周末或周一发布。前端精读帮你筛选靠谱的内容。 1. 引言 为什么要了解 Function 写法的组件呢?因为它正在变得越来越重要。 那么 React 中 Function Component 与 Class Component 有何不同? how-are-function-components-di...

    FWHeart 评论0 收藏0
  • 精读《Scheduling in React》

    摘要:调度系统,支持不同渲染优先级,对进行调度。调度带来的限制调度系统也存在两个问题。调度系统能力有限,只能在浏览器提供的能力范围内进行调度,而无法影响比如的渲染回收周期。精读关于调度系统的剖析,可以读深入剖析这篇文章,感谢我们团队的淡苍提供。 1. 引言 这次介绍的文章是 scheduling-in-react,简单来说就是 React 的调度系统,为了得到更顺滑的用户体验。 毕竟前端做到...

    LeexMuller 评论0 收藏0
  • 精读《如何编译前端项目与组件

    摘要:历史上由于是作为的替代品出现,当时要解决的问题是处理浏览器兼容问题,打包或,做一些公共资源替换,雪碧图等,最后可以顺带合并到一个文件,但模块化功能远远比弱,基本上只能合并,但不能理解模块概念。 1 引言 说到前端编译方案,也就是如何打包项目,如何编译组件,可选方案有很多,比如: 通过 webpack / parcel / gulp 构建项目。 通过 parcel / gulp / b...

    jiekechoo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<