Javascript

[JS Pattern] Container / Presentational Pattern

本文主要是介绍[JS Pattern] Container / Presentational Pattern,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

Presnetational Component:

A presentational compoentn receives its data through props. It's primary function is to simply display the data it receives the way we want them to, including sytles, without modiying that data.

 

Container Component:

Container component is to pass data to presentational component. Since they don't render anything themselves, they usually do not contain any styling either.

 

Hooks

In many cases, the Container / Presentational pattern can be replaced with React Hooks. The introduction of Hooks made it easy for developers to add statefulness without needing a container component to provide that state;

 

Pros / Cons

Pros: 

  1. Separation of concerns
  2. Resuable
  3. Modify presentational component is easy
  4. Testing is easy

Cons:

  1. With React Hooks, this pattern can easily be an overkill in smaller sized application

 

[Note]: From JS Patterns book

 

这篇关于[JS Pattern] Container / Presentational Pattern的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!