Compare

Compare the most interested concept

React vs Angular

React	Angular
library	framework
JSX	typescript
one direction data-flow	bi-direction data-flow
one way data binding	two way data binding
component based	MVC, component based

State vs Props

State	Props
change status in component	pass data
setState()	read-only (setProps() is deprecated)
data structure that starts with a default value when a component mounts	component's configuration
may be mutated across time, mostly as a result of user events	don't have to be just data, can also be callback functions

SQL vs No-SQL

SQL	No-SQL
table based	key-value pairs, document-based, graph databases or wide-column stores
predefined schema	dynamic schema
use sql	use unql
good fit for complex query	don't have standard interfaces
vertically scalable ----- increase the load on a single server	horizontally scalable ------- adding more servers
ACID properties (Atomicity, Consistency, Isolation and Durability)	Brewers CAP theorem (Consistency, Availability and Partition tolerance).

Element vs Component

Element	Component
the tag of an object representation of a DOM node	a function or a class which optionally accepts input and returns a React element

Component vs Pure Component

Component	Pure Component
	implement shouldComponentUpdate() with shallow props and state comparison It's the simplest, fastest components we can write
	class App extends React.PureComponent {}
	PureComponent changedshouldComponentUpdate, only rerender when state or props changes

Stateless Component	Stateful Component
don't have state	have state
can use function expression to create	must use class expression

Server Side Rendering vs Client Side Rendering

Server Side Rendering	Client Side Rendering
SEO	low SEO
initial loading becomes faster	initial load might require more time, faster after initial load
good for static sites	good for web application

Null vs Undefined

Null	Undefined
an assignment value	means a variable has been declared but has not yet been assigned a value
an object	a type itself

Call vs Apply vs Bind

Call	Apply	Bind
pass a single parameter	expect the second argument to be an array that it unpacks as arguments for the called function	returns a function
call a function with a given value and arguments provided individually	call a function with a given value, and arguments provided as an array (or an array-like object)	not execute immediately

Redux vs Flux

Redux	Flex
one store	multiple store
multiple reducers	no reducer
implemented dispatch function	have to implement dispatch
library	pattern
implemented based on flux

Parameter vs Argument

Parameter	Argument
a variable in a method definition	the data you pass into the method's parameters when a method is called
variable in the declaration of function	the actual value of this variable that gets passed to function

Presentational Component vs Container Component

Component vs Container

Presentational Component	Container Component
dumb component	smart component
Controlled Component	Uncontrolled ComponentSide
Component	Container
no aware of redux	aware of redux
concerned with how things look	concerned with how things work
receive data and callbacks via props	provide the data and behavior to presentational or other container components
Change data: invoke call back from props	Change data: dispatch Redux action
read data from props	subscribe to Redux state
rarely have own state and do with UI state instead of data state	call flux actions and provide these as callbacks to the presentational components, often stateful
written by hand	generate by redux
Accept props to allow them to be dynamic and reusable. send the title of a button in props from the parent component to allow it to have a unique name.	focus on how things work.Smart components can fetch, capture changes and pass down application data.
takes its current value through props and notifies changes through callbacks like onChange	stores its own state internally
parent component "controls" it by handling the callback	query the DOM using a ref to find its current valu
Focus on the UI Almost all basic UI components should be considered dumb components. Examples include loaders, modals, buttons, inputs, etc.	Manipulates Data Smart components can fetch, capture changes and pass down application data.
Rarely include state	Manage state

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

Smart usually as Dumb parents component

Class Component vs Functional Component

Class Component	Functional Component
allow you to use additional features like local state and lifecycle hooks	receive props and renders them to the page, can use pure function
to enable your component to have direct access to your store and thus holds state	also called stateless, dumb or presentational components

setState() vs forceUpdated()

setState()	forceUpdated()
used to update the component state with one or more new state properties	a way to force re-render of the component and its children
a way of mutating the state and managing view updates	doesn't mutate the state at all

XML vs JSON

XML	JSON
surrounded with HTML tags	an Object
slower	faster

createElement vs cloneElement

The React.createElement() method is used to create elements

React.createElement(
    type,
    [props],
    [...children]
)

The React.cloneElement() method is used when a parent component wants to add or modify the props of its children. The React.cloneElement() function creates a clone of a given element, and we can also pass props and children into the function.

{React.Children.map(props.children,
    child => {
        return React.cloneElement(child,
            { btn }, null); 
})}