In simple terms, react and Redux (3) – Export & import, high-level components

Time:2021-9-22

Export & Import

Export can export functions, classes, etc. there are two export methods:

  • Default export
  • Named export

Default export

Default export does not need to specify a name, but there can only be one default export in each file

//Export pure value or expression results
export default 1;
const a = 1;
export default a;

//Export function
export default function(){
  ...
}

//Export class
export default class {
  ...
};

Named export

Named export specifies the export name. Multiple can be exported in the same file

//Export while declaring variables
export let a =1;

//Export function
export function func1(){
  ...
}

//Unified export
const a = 1;
const obj1 = {name: 'obj1'};

export {a, obj1};

//Modify name on export
const obj1 = {name: 'obj1'};

export {obj1 as newObjName};

Import

The import method changes with the export method

Import default export and give it a name

export default function(){
  ...
}

import fun1 from './****.js';

Import named export

In this case, you need to use deconstruction syntax. You can also rename it during import, or import default export and named export at the same time.

...
export {a, obj1};
//Deconstruction derivation
import {a, obj1} from './****.js';

//Rename on import
import {a, obj1 as newObject} from './****.js';

You can also use * to import all. In this case, you must use as to specify the name

export {a, obj1};

import * as name from './****.js';
//Use
name.a
name.obj1

Import both default export and named export:

export default function()...
export function func1()...
export function func2()...

import defaultFunc, * as named from './****.js';

In the previous part, default export is exported first, and named export is exported later, and the name is specified with as.

Development aids

React Devtools

You can view the tree structure of the react component and the contents of each node. You can use it after installing the chrome plug-in.

Redux Devtools

You can view the Redux data flow, record each action and the corresponding change of the store, and jump the store state to any historical state (time travel).
After installing the chrome plug-in, you need some code support. Because the working principle of Redux devtools is to intercept the actions and state changes of the Redux store in all applications, you must add a hook in the Redux store through store enhancer. So you need to modify store. JS:

const storeEnhancers = 
  (window && window.devToolsExtension) ? window.devToolsExtension() : (f) => f;

export default createStore(reducer, {}, storeEnhancers);

The role of storeenhancers added here is to enable Redux devtools to intercept the store state of the current application. After installing Redux devtools, the browser will have a window.devtoolsextension object globally, but it also needs to be compatible. When the browser without this tool is running, this enhancer is a function that does nothing.

High order component

Higher order component (HOC) is a mode using react to enhance the functions of existing components.
In short, a high-order component is a function that accepts a component as input and returns a new component as the result. Moreover, the returned new component has functions that the input component does not have.
Functions of high-order components:

  • Reuse code, such as the container component when using Redux earlier, can be reused;
  • Modify the behavior of existing react components

According to the implementation mode, high-order components can be divided into

  • Agent based high-order components
  • High order components of inheritance mode

Agent based high-order components

The role of the new component is a “proxy” of the incoming parameter component. In the render function of the new component, the wrapped component is rendered. Except for the work to be done by the high-level component, all other functions are transferred to the wrapped component.
This organization mode can be used to modify the prop, style, etc. of the wrapped components. Shao:
Manipulate prop
For example, the following addnewprops component can add attributes to wrappedcomponent:

const addNewProps = (WrappedComponent, newProps) => {
  return class WrappingComponent extends React.Component {
    render() {
      return 
    }
  }
}

Strictly speaking, addnewprops here is a component factory, but it is generally regarded as a component directly.

Extraction status
Similar to the container components written in the previous Redux section and the components generated by the connect function provided by react redux.
Packaging components
For example, it can be used to combine multiple react components or add a unified style to the packaged components.

High order components of inheritance mode

The previous addnewprops are implemented by inheritance as follows:

function addNewProps(WrappedComponent) {
  return class NewComponent extends WrappedComponent {
    render() {
      const {newProps} = this.props;
      this.props = {...this.props, newProps};
      return super.render();
    }
  };
}

The biggest difference is return super. Render();

In proxy mode, wrappedcomponent has gone through a complete life cycle, but in inheritance mode, super.render is only a function in a life cycle; The new component and parameter component generated in the proxy mode are two different components. Once rendered, both components have to go through their respective life cycles. In the inheritance mode, they are combined into one and have only one life cycle. thereforeHigh order components in inheritance mode can be used to manipulate the life cycle function of componentsFor example, the following components are controlled by shouldcomponentupdate. Only usecache = false will they be re rendered:

const cacheHOC = (WrappedComponent) => {
  return class NewComponent extends WrappedComponent {
    shouldComponentUpdate(nextProps, nextState) {
      return !nextProps.useCache;
    }
  }
}

Function as subcomponent

There is a parent-child relationship between the high-order component and the original component, and their communication needs props, which means that the props of the high-order component has a disadvantage, that is, the props of the original component needs to include the fields passed by the high-order component, that is, whether a high-order component can act on a component X, we should first see whether the component X can accept the props passed by the high-order component.
High order components, which require parameter components to have contracts with themselves, will bring great limitations to their use.
The mode of “taking function as sub component” is born to overcome this limitation.
If the addnewprops mentioned above is implemented with “function as sub component”, it is:

const loginUser='fake user';
class AddNewProps extends Component{
  render(){
    const user = loginUser;
    return this.props.children(user);
  }
}

Different from the component factory of high-level components, addnewprops itself is a component. Call the original component through this.props.children and pass the value. The original component must be a function.
Use of addnewprops:

//Let a component display user directly

  {(user)=> {user}}


//Pass user to another component

  {(user)=> }


//Pass user to another component,支持不同的prop名称

  {(user)=>

From the third example of “taking function as sub component”, we can see that this mode is very flexible. It can cope with the situation that prop has different names. The function as a child component becomes the bridge between the parent component and the underlying component, and this function can contain various logic.

Reference books

In simple terms, react and Redux: Cheng Mo
Fully parse JavaScript import and export

Recommended Today

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Test source code: import { Component } from ‘@angular/core’; import { createSelector } from ‘@ngrx/store’; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1; export const selectCounter2 = (state: State) => state.counter2; export const selectTotal = createSelector( selectCounter1, selectCounter2, (counter1, counter2) => counter1 + counter2 ); // […]