New features of react16

Time:2021-2-26

New features of react16

1. lazy & Suspense

React 16.6 splits the codecode-splitting)To a new level. You can now load components when you really need them without having to install other dependent libraries.

React.lazy () provides the ability of dynamic import component to realize code segmentation.

The purpose of suspend is to suspend the rendering while waiting for the component and display the load flag.

Currently, suspend in react v16.6 only supports one scenario, that is, using React.lazy () and< React.Suspense >Implement the dynamic loading component.

A chestnut, for example

import React, {lazy, Suspense} from 'react';
const Lazy = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Lazy />
    </Suspense>
  );
}

This is the simplest example. When I initialize the < app > component, the suspend component will fill in a div of loading… Before rendering the lazy component

In our actual business scenario, we may need to wait for an interface to load and render on demand

const Lazy = lazy(() => new Promise(resolve => {
  //Timer disguised as interface
  setTimeout(() => {
    resolve(import('./LazyComponent'));
  }, 3000);
}));

At this time, our lazy component will render in 3000ms

In our business scenario, app can represent multiple conditional rendering components, and we will cancel the loding only after all of them are loaded.

As long as promise fails to resolve, suspend will return loading in fallback.

The code is simple, loading can be promoted to ancestor component, easy to aggregate. Quite elegant solution to the conditional rendering.

2. Memo

React.memo () can only act on simple function components. It is essentially a high-order function and can automatically help components execute shouldcomponentupdate (), but it only performs shallow comparison, and its significance and value are limited.

const MemoizedComponent = React.memo(props => {
  /*Re render only when props changes*/
});

3. Hooks

Hooks aims to solve the problem of state logic reuse, and will not produce JSX nested hell. Its characteristics are as follows:

  • Multiple states will not produce nesting, but are still tiled;
  • Hooks can refer to other hooks;
  • It is easier to separate UI and state of components;

Hooks is not implemented by proxy or getters, but by arrays. Every time a usestate changes its subscript. If a usestate is wrapped in a condition, the subscript of each execution may not be correct, resulting in the wrong data update of the setter exported by usestate.

function App() {
  const [open, setOpen] = useState(false);
  
  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>
        Open Modal
      </Button>
      <Modal
        visible={open}
        onOk={() => setOpen(false)}
        onCancel={() => setOpen(false)}
      />
    </>
  );
}
//There are many scenarios for using [todo] hooks, which need to be supplemented

4. createRef

React16 standardizes the way to get Ref React.createRef Gets the ref object.

At present, it is often used in my development, for example, in one-way data flow, you can get the props and state of the child component in the parent component, and so on

 constructor(props) {
    super(props)
    
    this.myRef = React.createRef()
  }

  render() {
    return <div ref={this.myRef} />
  }

5. Fragment

Fragment is also very common in current development. For example, when multiple subcomponents are returned in the render function, I can wrap them with fragment

render() {
  return (
    <React.Fragment>
      <h2>I drove my neighbor's Toyota, chasing the sunset</h2>
      <h2>She has been to the most dangerous places by her parents</h2>
    </React.Fragment>
  );
}

Of course, we can use a simpler way

render() {
  return (
    <>
      <h2>I drove my neighbor's Toyota, chasing the sunset</h2>
      <h2>She has been to the most dangerous places by her parents</h2>
    </>
  );
}