React Conf 2021

React new teaching document

The current progress of the tutorial part is 70%, and the API part is 30%.

  1. Hooks First. Taught entirely from the perspective of Hooks.
  2. Interactivity. Examples can be coded directly on the site, avoiding the boring read-only mode of previous documents. This feature is in deep collaboration with Codesanbox, for which a new Sandpack has been created
  3. Major structural adjustments. Total score structure, outline first, details later.
  4. There are problems at the end of each chapter.

In the future, the documentation area will be much more interactive. Sandpack is open source and will be widely adopted.

The React tools

React Developer Tools is further updated with Timline features planned in addition to optimizations for Components and Profiler.

The Timline function allows you to view various times of the React component and non-React code in your application. Suspense and other functions are supported to locate performance problems more accurately. I’m looking forward to it.

React Forget

Big.

Originally we need to write useCallback,useMemo, etc. in the code to optimize the performance, now the official launch of this function, you can automatically optimize, bring the benefits are:

  1. Less code
  2. Better performance.

React 18 New features

  • Automatic batch processing
  • The service side suspense
  • The new API

Automatic batch processing

Prior to Act18, multiple setStates in a component were automatically batched, but for example in a Fetch callback, if you call multiple setStates you will render multiple times, which was optimized after 18.

The service side suspense

Performance optimization tools.

The main purpose of this is to improve the user experience

React18, which previously applied to entire hydrates, can now apply to single component Hydrates.

One benefit is that you can set the rendering priority of the component.

The advantage of Code Splitting over Code Hydrate is that if you have multiple suspense components in place at the same time, but the user clicks on one of them, the one that gets clicked will take precedence over hydrate.

The new API (concurrent the features)

  • startTransition
  • useTransition
  • useDeferredValue()

These three are for the average developer.

  • useId()
  • useSYncExternalStore()

Useful for library developers. UseId () this mainly generates a UUID.

The upgrade way

Change from render to createRoot.

other

  • Strict mode Indicates strict mode
  • The flushSync() API avoids automatic batching

Relay to introduce

There are two kinds of numbers we take in everyday life:

  1. Each component requests it. The advantage is that the coupling is small, but the number of requests is large.
  2. A request with a large amount of data. The advantage is that the request is sent only once, but the invalid data will be many.

Relay balances this by collecting the configuration of each component into one large request that returns accurate data.

This allows for component isolation while avoiding multiple requests and returning data that is not redundant.

Server component

Hydrogen, a library of Shopify, is introduced.

This can be combined with earlier server-side suspense.

RN part.

Two topics are mainly introduced

  1. AI study. Demonstrates how PyTorch can be used in RN. The example given is to invoke a camera to identify objects on the table such as a mouse, a doll, etc.
  2. The Desktop. RN has also been involved in desktop development in addition to mobile, such as the Xbox interface, which Is mainly done by Microsoft. For details, see React-Native Windows.