• What’s New in React 16.3(.0-alpha)
  • Bartosz Szczeciński
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: pot – code
  • Proofread by: Ryouaki, Goldeli

React 16.3(.0-alpha) new feature

React 16.3-Alpha was recently rolled out to NPMJS and is now available for use in projects. What changes do you care about most?

Update February 5, 2018 — I misunderstood some of the createContext behavior and have updated this section to reflect some of the behavior of the factory method.

New Context API

The Context API has always been mysterious — it was originally an official, documented API, but developers have warned us not to use it as much as possible because the API is not fully finalized, may be changed in the future, and is not fully documented. However, it is time for it to shine, the RFC process has been passed, the new API code has been merged, and it is much easier to use. At least in terms of state management, Redux and MobX can be dispensable if the project is not complex.

The new API method is mainly reflected in the react.createcontext (), which creates two components:

Call React. CreateContext () to create a context object

The object returned by this factory method contains the “Provider” and “Consumer” properties, the two components mentioned above.

The Provider component is used to provide data to all of its child components as shown in the following example:

In the figure above, place the component that needs to receive data under themecontext. Provider and set its value property to store the data that needs to be passed. Of course, the value can also change dynamically (using this.setstate).

Next set up the Consumer component:

If you place the Consumer component outside of the Provider component (not underneath it), its value will default to the value passed in when you call createContext.

PS:

  • The Consumer component can only get the data set in the corresponding Context. Even if a new Context is created and passed the same parameters as the existing Context, a Consumer that does not belong to the Context does not get the data set. Therefore, consider the Context as a component. Create the same Context once and export/import it as needed.
  • The new approach uses the “function as Child Pattern” (sometimes called the Render Prop pattern), which you can refer to here if you are unfamiliar with this pattern.
  • New apis don’t have to be passedprop-typesSet up thecontextProps.

The context parameter in Consumer corresponds to the value property set in the Provider component. Modifying the data set in the Provider will cause the corresponding Consumer component to be re-rendered.

New lifecycle approach

The other RFC that pushed it into alpha had to do with the abolition of certain lifecycle methods, and the introduction of a new method.

These changes are intended to lead developers to best practices (see another article I’ve written about the unfortunate lifecycle methods that will be scrapped) as well as accommodate the future of fully open asynchronous rendering (which is the primary goal of React 16 “Fiber”).

The methods to be abolished are as follows:

  • componentWillMount— To be abolished, usedcomponentDidMountAs an alternative
  • componentWillUpdate— To be abolished, usedcomponentDidUpdateAs an alternative
  • componentWillReceiveProps– To be abolished, using newly introduced methodsstatic getDerivedStateFromProps

Don’t panic, these methods are currently working and will not be affected until version 16.4 is officially marked as “abolished”, the actual removal may not be until version 17.0.

“It’s a long story, so don’t panic,” Dan said.

If StrictMode or AsyncMode is enabled, it will only tell you that the method has been abolished. If you do not want to see the message, you can use the following method instead:

  • UNSAFE_componentWillMount
  • UNSAFE_componentWillReceiveProps
  • UNSAFE_componentWillUpdate

Static method: getDerivedStateFromProps

Since componentWillReceiveProps will be abolished, so, there are other ways can be changed according to prop update state (do not recommend the use of this development mode)? This is where we’re going to use our new static method.

Static is the same concept as in other languages: it is a method that exists in the class itself, independent of the creation of an instance. It differs from normal class methods in that it does not access the this keyword and that the method is preceded by a static modifier.

Well, that’s fine, but there’s a problem. If you can’t access this, how can you update the status with this.setState? The answer is, “You don’t need to use this method at all.” You just need to return the new state. You don’t need to set the method. If no status update is required, return NULL:

In addition, the mechanism for returning a value is similar to the mechanism for using setState — you only need to return the part of the state that changed, and the rest of the value is retained.

On the blackboard:

Remember to initialize state in the constructor (either in the constructor or using class field), or else you’ll get an error.

This method is called when the component is first mounted and about to be rerendered, so you can initialize state in it instead of in the constructor.

If at the same time defines the getDerivedStateFromProps and componentWillReceiveProps, only getDerivedStateFromProps will be invoked, at the same time the React will print out the warning message.

There’s also a case where you need to execute a callback when the state changes, so you can use componentDidUpdate.

If you feel static is not elegant enough, you can define static in the same way:

StrictMode

Strict Mode is a new addition designed to guide you to follow best practices. Place the cluster of components that you want to constrain underneath it and you’re done:

A completely variant of ‘use strict’

The console prints an error message (in development) if the underlying component accidentally uses the lifecycle method mentioned above to be disabled:

The link to the error message is currently to an RFC issue, also due to the abolition of the lifecycle method.

AsyncMode

To match StrictMode, the asynchronous component support is now renamed React. Unsafe_AsyncMode, which also raises StrictMode warnings.

For more information on the use of asynchronous components, see the following blog post:

  • build-mbfootjxoo.now.sh/
  • Github.com/koba04/reac…

The new React development tool

The new version of the development tool has been updated to recognize the new components.

However, the Chrome plugin hasn’t been updated yet and will have to wait a while, so debug will see something interesting:

React. __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.

Firefox users are blessed with full support for:

You can see that the AsyncMode component is recognized directly.

After a day to talk about

Anyway, this is just the alpha version, there may be some changes when the stable version comes out. According to Dan, the stable version should be out next week or so:

Speak reason, this unceasingly passed a week?

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.