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

sunsmell 发布于2019-08-26 13:39 / 841人阅读

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

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; //

超融合服务器专线服务 asp的组件有哪些哪里有免费的弹性云主机弹性云服务器不包含哪个组件有弹性

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

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

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

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

Shihira 2019-08-26 13:22 评论0 收藏0
精读《Serverless 给前端带来了什么》

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

wizChen 2019-08-26 13:35 评论0 收藏0
精读《Function VS Class 组件》

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

FWHeart 2019-08-26 13:38 评论0 收藏0
精读《Scheduling in React》

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

LeexMuller 2019-08-23 16:56 评论0 收藏0
精读《如何编译前端项目与组件》

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

jiekechoo 2019-08-23 14:52 评论0 收藏0