《React 加油站》_57实用知识库分享20231204205755.pdfVIP

《React加油站》_57

目录

《React加油站》_57

第1篇React中的dumb组件和smart组件译

第2篇React18Concurrent之startTransition译

第3篇React18Concurrent之useDeferredValue译

第4篇React18Automaticbatching译

第5篇React18concurrentmode详细讲解

第6篇React18将要来了，快来尝尝鲜吧

第7篇「ReactFiber」详细解析

第8篇ReactuseEffect不支持asyncfunction你知道吗？

第9篇React中自定义hook怎么写？

第10篇应该从哪些方面分析React性能

第11篇详解ReactHooksApi

第12篇React函数式组件中实现「批量更新」的两种方式

第13篇关于React中「useEffect」的五个使用问题

第14篇详解React的工作流「调和阶段、提交阶段」

统、算法、数据库」等101

第16篇103个关于「React的高频面试」问题整理，适合面试或者全面学习

第18篇React17新特性：启发式更新算法

第19篇React运行时优化方案的演进

第1篇React中的dumb组件和smart组件译

第1篇React中的dumb组件和smart组件译

当你开始起步学习React，很快就会接触到组件（Component）的概念，正是这一概念让React

脱颖而出。创建不同的组件并将它们嵌套在一起，就能构建出一个应用。听起来再简单不过了，

但真实情况还会更复杂些。有两种不同类型的组件，称之为smart组件和dumb组件。

DumbComponents

这种组件本身只有一个render()方法（他们也用不到其他的），并且总是表现为Javascript

函数。不用维护内部state，不用知道当收到请求时如何改变其展现的数据-无知便是福。

constFooter=(props)={

return(

div

ul

liFooterInformation/li

/ul

/div

)

}

一个“helloworld”组件可以被认为是最基础的dumb组件，或者网站头尾那种整块的部分。

组件被定义一次后，可以在应用中被多次引用；值渲染其核心部分，组件的每个实例看起来都差

不多。想要改变其外观的话，只有props这一个地方可以着手。简单又直观。

SmartComponents

根据容器设计模式（thecontainerdesignpattern），容器组件和展示组件被分开设计并各司

其职。容器组件需要管理自身繁复的生命周期，并负责将数据作为props，向下传递给展示型组

件。

smart组件是基于类的，并在constructor()函数中定义自身的state。

classAppextendsComponent{

constructor(props){

super(props);

this.state={pictures:[]};

}

}

此类组件也经常包含其他回调函数，用于升级state并变成props传递给子组件。

应用的根组件就是一个很好的smart组件范例，经常负责管理整个应用的若干个state的片

段，并需要将附加的功能下发到其子组件，从而实现用户交互时state能被更新

原文：/@thejasonfile/dumb-components-and-smart-components-

e7b33a698d43

第1页/共295页

第2篇React18Concurrent之startTransition译

第2篇React18Concurrent之startTransition

译