React advanced use

Time:2020-11-23

Uncontrolled components

unavailablesetStateUse uncontrolled components to get the desired results, such as file uploads

Portal

Function: let the component render outside the parent component

Usage scenarios:

  • overflow: hidden
  • Parent componentz-indexThe value is too small
  • fixedPut inbodyThe first level of
ReactDOM.createPortal(
  <div className="modal">{this.props.children}</div>,
  document.body
);

Context

const ThemeContext = React.createContext('light')

<ThemeContext.Provider value={this.state.theme}>
    <A />
</ThemeContext.Provider>

//Class component: a component
class A extends React.Component {
    //Static contexttype = themecontext is equivalent to the following a. contexttype = themecontext
    render() {
        const theme =  this.context   //React will look up the nearest theme provider
        return <div>{theme}</div>
    }
}
A. Contexttype = themecontext // specifies the contexttype to read the current themecontext

//Function component: B component
function B = () => {
    //Function component does not have this.context
    //Function components can use the ThemeContext.Consumer
    return <ThemeContext.Consumer>
        {value => {value}}
    </ThemeContext.Consumer>
}

Asynchronous component

const A = React.lazy(() => import("./A"))

//When using asynchronous components, there may be some waiting situations, which can be used React.Suspense , fallback can pass in the loading component
<React.Suspense fallback={<div>loading...</div>}>
    <A />
</React.Suspense>

performance optimization

reactThe default parent component is updated and the child component is updated unconditionally

shouldComponentUpdateDefault returntrue

shouldComponentUpdate(nextProps, nextState) {
    if(nextState.count !== this.setState.count) {
        Return true // can be rendered
    }
    Return false // do not render repeatedly
}

PureComponentandmemoYesshouldComponentUpdateShallow comparison

classComponent usagePureComponent, function components usememo

memouse

function A(props) {
  //Render with props
}

function areEqual(prevProps, nextProps) {
  /*
   *If the return result of nextprops passing into the render method is consistent with that of passing prevprops into the render method, true is returned; otherwise, false is returned
   */
}

React.memo(a, areEqual);

High order components

//High order component is not a function, but a pattern
const HOCFactory = (Component) => {
  class HOC extends React.Component {
    //Define the common logic for multiple components here
    render() {
      return <Component {...this.props} />;
    }
  }
  return HOC;
};
const EnhancedComponent1 = HOCFactory(WrapperComponent);

Render Props

//The core idea of render props
//Pass the state of the class component as props to the pure function component through a function
class Factory extends React.Component {
  constructor() {
    this.state = {
      //State is the common logical data of multiple components
    };
  }

  //Modify state
  render() {
    return <div>{this.props.render(this.state)}</div>;
  }
}

const App = () => {
  <Factory
    render={
      /*Render is a function component*/
      (props) => (
        <p>
          {props.a}
          {props.b}
          ...
        </p>
      )
    }
  />;
};

Recommended Today

Operation database

A series of articles: MySQL – getting to know MySQL Operation database Modify delete table Create database table Data management and DML statement of MySQL DQL (date query language) database query statement affair Indexes JDBC Database operation Database connection pool affair MySQL advanced optimization notes Show databases; — show all databases, single line comments /* […]