preface

React, Redux, and React-Redux are different from each other. Here we will analyze them in detail.

React: Responsible for component UI rendering; Redux: data processing center; React-redux: Connect components to the data center, i.e. connect React to Redux.

React

React is primarily a UI implementation framework that focuses on the View layer. For some small projects, if there is not a lot of data interaction, it is perfectly possible to just use React.

In the traditional page development model, you need to manipulate the DOM multiple times to update the page, and we all know that manipulating the DOM can cause significant performance problems. React improves performance by reducing the number of operations on the Virtual DOM.

Virtual DOM

React works based on the Virtual DOM, which is a Virtual space.

It works like this: When data needs to be updated, it calculates the Virtual DOM first and compares it with the last Virtual DOM to get the difference of DOM structure. Then it only updates the parts that need to be changed to the real DOM in batches.

React uses the React – Diff algorithm to calculate the Virtual DOM. As we all know, the traditional DIff algorithm compares each node in turn through cyclic recursion, which is inefficient and the algorithm complexity reaches O(n^3), where N is the total number of nodes in the tree.

React Diff:

  1. In Web UI, DOM node movement across hierarchies is very few and can be ignored.
  2. Two components with the same class will generate similar tree structures, and two components with different classes will generate different tree structures;
  3. For a set of child nodes at the same level, they can be distinguished by unique ids.

React optimizes tree diff, Component diff, and Element diff respectively:

  1. tree diff: A tree is compared by layer. Two trees are compared only on nodes at the same layer
  2. component diff:
  • If the components are of the same type, continue to compare the Virtual DOM Tree according to the original policy.
  • If not, the component is judged to be a dirty Component and all child nodes under the entire component are replaced.
  • For components of the same type, it is possible that the Virtual DOM does not change at all. Knowing this for sure can save a lot of diff time. React therefore allows the user to determine if the component needs to diff by shouldComponentUpdate().
  1. element diffReact Diff provides three node operations when nodes are at the same level: Insert, move, and delete.

Here’s a comparison flow chart for the React Diff algorithm:

React lifecycle

React has a total of 10 periodic functions (render repeats once). These 10 functions can meet all of our requirements for component operations and can be used well to improve development efficiency and component performance.

When a component is initialized, it fires five hook functions:

  1. getDefaultProps()

Set the default props. Es6 uses static dufaultProps={} to set the default properties of the component. It is executed only once throughout the life cycle.

  1. getInitialState()

This hook function is not available when using es6’s class syntax; you can define this.state directly from constructor. At this point, access this.props.

  1. componentWillMount()Ajax data pull operation, timer start.

Called when the component is initialized, not later when the component is updated, and only once throughout its life cycle, when state can be changed.

  1. render()

React creates the virtual DOM, performs the diff algorithm, and updates the DOM tree. You can’t change state at this point.

  1. componentDidMount()Animation starts and the input box automatically focuses

Called after the component has rendered, the dom node can be retrieved and manipulated by this.getDomNode () only once.

5 hook functions are also triggered when updating:

  1. componentWillReceivePorps(nextProps)

Not called when the component is initialized, but when the component accepts new props. Raised regardless of whether the props passed by the parent component to the child component were changed.

  1. shouldComponentUpdate(nextProps, nextState)

React performance tuning is an important part of the process. If the props and state are the same, return false to block the update, because the same property state must generate the same DOM tree. In this way, there is no need to create a new DOM tree to compare the old DOM tree with the diff algorithm, which saves a lot of performance, especially when the DOM structure is complex. Calling this.forceUpdate skips this step, however.

  1. componentWillUpdate(nextProps, nextState)

It is not called when the component is initialized, but only when the component is about to be updated, at which point you can change state

  1. render()

Not much said

  1. componentDidUpdate()

It is not called when the component is initialized. It is called after the component is updated, at which point the DOM node can be obtained.

Unmount hook functions

  1. componentWillUnmount()Timer clearing

Called when a component is about to unload, and some event listeners and timers need to be cleared.

Redux

Redux is an architectural pattern that evolved from Flux.

Redux’s Three principles

  1. Unique data source
  2. State the read-only
  3. Data changes can only be done using a reducer function

Redux core API

Redux consists of three parts: Store, Reducer, and Action.

store

The core of Redux is store, which is generated by createStore(Reducer, defaultState) provided by Redux. Three methods are generated, getState(), Dispatch () and subscrible().

  • GetState () : stored data, state tree;
  • Dispatch (Action) : Dispatches an action and returns an action, which is the only way to change the data in the store;
  • Subscrible (Listener) : Registers a listener that is called when the store changes.

reducer

Reducer is a pure function that calculates the new state based on previousState and action. reducer(previousState,action)

action

An action is essentially a JavaScript object that must contain a Type field to indicate the action to be performed, and other fields can be customized as required.

const ADD_TODO = 'ADD_TODO'
Copy the code
{
  type: ADD_TODO,
  text: 'Build my first Redux app'
}
Copy the code

integration

The interaction between them can be summarized in the following figure:

React-Redux

Redux itself has nothing to do with React, it’s just a data processing center, and it’s react-Redux that binds them together.

React-rredux provides two methods: connect and Provider.

connect

Connect Connects the React component to the Redux Store. Connect is actually a higher-order function that returns a new component class connected to the Redux Store.

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)
Copy the code

TodoList is a UI component, and VisibleTodoList is a container component automatically generated by React-Redux through the connect method.

  1. mapStateToProps: Extracts the required parts from the Redux state tree as props to the current component.
  2. mapDispatchToProps: Passes the response events (actions) that need to be bound to the component as props.

Provider

The Provider implements global access to stores, passing stores to each component.

React context works by using the React context. Context can be passed between components.

conclusion

The following diagram illustrates the workflow between them: