Chapater07 Enhancing Components

[zhu-ting]

There are two primary lifecycles: the mounting lifecycle and the updat‐ ing lifecycle.The mounting lifecycle consists of methods that are invoked when a component is mounted or unmounted.

The mounting lifecycle is slightly different depending upon whether you use ES6 class syntax or React.createClass to create components. When you use createClass, getDefaultProps is invoked first to obtain the component’s proper‐ ties. Next, getInitialState is invoked to initialize the state. ES6 classes do not have these methods. Instead, default props are obtained and sent to the constructor as an argument. The constructor is where the state is initialized. Both ES6 class constructors and getInitialState have access to the properties and, if required, can use them to help define the initial state.

[zhu-ting]

Components are unmounted when their parents remove them or they have been unmounted with the unmountComponentAtNode function found in react-dom. This method is used to unmount the root component. When a root component is unmounted, its children are unmounted first

[zhu-ting]

Mounting

These methods are called in the following order when an instance of a component is being created and inserted into the DOM:

constructor() static getDerivedStateFromProps() render() componentDidMount()

[zhu-ting]

Updating

An update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered:

static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate()

[zhu-ting]

Unmounting

This method is called when a component is being removed from the DOM:

componentWillUnmount()

Error Handling

This method is called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.

componentDidCatch()

[zhu-ting]

https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops

[zhu-ting]

Higher-Order Components

A higher-order component, or HOC, is simply a function that takes a React compo‐ nent as an argument and returns another React component. Typically, HOCs wrap the incoming component with a class that maintains state or has functionality. Higher-order components are the best way to reuse functionality across React com‐ ponents.

[zhu-ting]

Flux

Flux is a design pattern developed at Facebook that was designed to keep data flowing in one direction. Before Flux was introduced, web development architecture was dominated by variations of the MVC design pattern. Flux is an alternative to MVC, an entirely different design pattern that complements the functional approach.

Every change requires an action. Every action provides the instructions to make the change. Actions also serve as receipts that tell us what has changed, what data was used to make the change, and where the action originated. This pattern causes no side effects. The only thing that can make a change is a store. Stores update the data, views render those updates in the UI, and actions tell us how and why the changes have occurred.