React（四）：Smart组件与Dumb组件

Dumb组件：在react中，只会接收props，根据props进行渲染的组件称为Dumb组件。

Dumb组件不依赖除了React.js和Dumb组件以外的内容，Dumb组件是最纯粹的，可复用性最好的组件。

Smart组件：单靠Dumb组件无法构建应该程序，因为它们除props外，不依赖其他外部的内容，因而无法获取数据。这就需要另一种组件，它们非常“聪明”，专门从事数据相关的应用逻辑，如与Ajax交互等，这种组件称为Smart组件。

Dumb组件与Smart组件的关系：Smart组件负责数据相关的应用逻辑，将获取到的数据通过props传递给Dumb组件，Dumb负责UI的呈现。

Smart组件一般作为Dumb组件的父组件，如下图：

举一个简单的例子：TableShow是一个显示表数据的Dumb组件，TableShowContainer是一个Smart组件，负责与后台进行数据交互，将接收到的数据传递给TableShow，再由TableShow渲染到页面。

你也许会问，那我直接由Smart组件获取到数据后直接渲染到页面不就行了，为什么还要再传递给一个Dumb组件。

确实Smart组件可以包含Dumb组件，将数据直接渲染到页面。但是Dumb组件的目的是为了高度复用。

假设一种场景，SmartA与SmartB是两个实现不同业务功能的组件，它们都可以对Table数据进行更新。如果直接在Smart组件中进行渲染，那么同一段渲染Table的代码，需要在两个Smart组件中分别写一遍。如果我们将渲染Table这一操作抽离成一个Dumb组件，那么只需要在SmartA获取到后台更新数据时，将数据通过props传给Dumb组件，即可实现Tabke数据的更新，SmartB同理。

不止是大的项目需要严格且有逻辑的组件层划分，在平时的学习以及练习中，应养成一种好的逻辑思维，让它变成一种习惯，才不会手忙脚乱。

欢迎关注公众号“洁儿的漫漫求学路”，互相学习，共同进步~

React（四）：Smart组件与Dumb组件相关推荐

Lesson 43 Smart 组件 vs Dumb 组件
Lesson 43 Smart 组件 vs Dumb 组件大家已经知道,只会接受 props 并且渲染确定结果的组件我们把它叫做 Dumb 组件,这种组件只关心一件事情 -- 根据 props 进行 ...
react 子传参父_React 子组件给父组件传值、整个组件、方法
一.准备工作 1.定义一个父组件,名字为Parent /src/component/Parent.js import React, {Component} from 'react' export de ...
web前端高级React - React从入门到进阶之组件的状态提升
系列文章目录第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到进阶之JSX虚拟DOM渲染 ...
web前端高级React - React从入门到进阶之组件的懒加载及上下文Context
第二部分:React进阶系列文章目录第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到 ...
react父子组件，兄弟组件，爷爷到孙子组件笔记
import React from 'react' import App from './App' // 1.父传子. // 2.子传父 class ComCent extends React.Com ...
【React系列教程五】父子组件传值、defaultProps和propTypes
一.父组件给子组件传值(即子组件调用父组件数据和方法) 1.在调用子组件的时候,定义一个属性 <Header msg='首页'></Header> 2.子组件中通过 this ...
react之纯函数、函数组件、类组件、纯组件
一.纯函数 Pure Function 定义:一个函数的返回结果只依赖于它的参数,并且在执行的过程中没有副作用,我们就把该函数称作纯函数. - 特点: 1.函数的返回结果只依赖与它的参数(同一个输入只 ...
React子组件给父组件传值，父组件引用子组件并给子组件传值
本博客代码是 React 父组件和子组件相互传值的 demo:实现封装一个折线图,折线图选择下拉框,获取下拉框点击的值并且传给父组件根据下拉框筛选的条件更新视图:效果图如下: 父组件代码: 代码解析: ...
react hooks使用_如何使用Hooks将React类组件转换为功能组件
react hooks使用 by Balaganesh Damodaran 通过Balaganesh Damodaran 如何使用Hooks将React类组件转换为功能组件 (How to conve ...

React（四）：Smart组件与Dumb组件

React（四）：Smart组件与Dumb组件相关推荐

最新文章

热门文章