implement shouldComponentUpdate() with shallow props and state comparison
It's the simplest, fastest components we can write
| | | class App extends React.PureComponent {} | | | PureComponent changed`shouldComponentUpdate, 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); })} ```