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

2022-03-14 16:48:16 浏览数 (1)

1. 引言

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

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

2. 概述

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

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

  1. 不要阻塞数据流。
  2. 时刻准备好渲染。
  3. 不要有单例组件。
  4. 隔离本地状态。

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

不要阻塞渲染的数据流

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

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

代码语言：javascript复制
class Button extends React.Component {
  state = {
    color: this.props.color
  };
  render() {
    const { color } = this.state; // 


	


编程算法 mapreduce 渲染 react 




	






	

 0 人点赞