React Donf 2021 Playback video, the biggest shock!!

So what’s the point of this meeting?

  1. 🤙 Suspense
  2. 🤙 Concurrency
  3. 🤙 Server Components
  4. 🤙 Automatic batch processing

🤘 Suspense function

Why do you need this feature in the first place? Among the tens of thousands of components, the authorities found some code similarities, as follows:

function Test() { const [ data, isLading ] = useData("xxxxxxxxxxx"); if (isLading) { return <>Lading.... < / a >; } return ( <div> {data} {/* TODO */} </div> ); }Copy the code

In Suspense it seems that code in such cases can be pulled out of Suspense! Such as:

const Lading = lazy(() => import("./Lading"));
function App() {
  return (
    <div>
      <Suspense fallback={<Lading />}>
        <Test />
      </Suspense>
    </div>
  );
}
Copy the code

In this case, the data in the Test component is displayed while the data in the Test component has not finished loading.

If that’s all Suspense is for you! Then this conference will be for nothing! In fact, there are many uses for it, such as:

  1. 🤙 dynamic load code split JS package! Or load other asynchronous resources to improve the rendering ability of the client!
  2. 🤙 builds server side rendering components based on Suspense features!

** Note: In essence, Suspense features can greatly improve the data loading process. **

🤘 Concurrency

Cause: Because multithreading exists on mobile devices, RN’s team introduced the concept of concurrency features into React. To achieve the unification of the two platforms!

Involving the API:

  1. 🤙 starTransition
  2. 🤙 useTransition
  3. 🤙 useDeferredValue

Let’s go straight to the comparison chart without further ado:

Synchronous mode:

Concurrent:

Between you and me, I didn’t record the demo while I was watching it, so I used itFigure in discussion of React -18.

Note: The concurrency feature is currently the most important foundation of React 18. There will be no concurrency mode, only concurrency! (Concurrency will not be automatically enabled, you need to use API to manually enable!)

🤘 Server Components

The server components are implemented based on Suspense functionality. Can greatly improve the server rendering home page loading speed!

For example, when rendering a page on the server, if some parts of the page are too big, you can use Suspense rendering beforehand (figure 1). Then render the more informative parts (see Figure 2).

Graph one:

Code:

<Suspense fallback={<Spinner />}>
  <Comments />
</Suspense>;
Copy the code

Figure 2:

Note: The server component is still under development, so it doesn’t exist in a stable release of React 18 yet!

🤘 Automatic batch processing

This function is also quite important, in fact, translated into line is automatic merge update! Such as:

class test extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
    this.setState({ count: this.state.count + 1 });
    this.setState({ count: this.state.count + 1 });
    this.setState({ count: this.state.count + 1 });
  };
  render() {
    return (
      <>
        {this.state.count}
        <button onClick={this.handleClick}> Add</button>
      </>
    );
  }
}

export default test;
Copy the code

For example, in the handleClick method we call setState four times, which is actually merged into one in the update queue. Used to reduce page rendering.

Remember React’s most famous interview question? When is setState updated synchronously and when is it updated asynchronously?

React 18 makes this question impossible! React 18 supports update merges regardless of whether setState is written in native events, setTimeout, or promise. then!!

Such as:

function test() { const [count, setCount] = useState(0); const [name, setName] = useState(""); const butDOM = useRef(null); setTimeout(() => { setCount(count + 1); setName("setTimeout"); }, 1000); new Promise((resolve) => { resolve("success"); }).then(() => { setCount(count + 1); setName("Promise"); }); butDOM.current? .addEventListener("click", function () { setCount(count + 1); setName("addEventListener"); }); return ( <> <p>{name}</p> <p>{count}</p> <button ref={butDOM}>Add</button> </> ); }Copy the code

React Conf 2021