S
Alla inlägg

REACT V15

  • development
  • javascript
  • react.js

Major changes include:

  • Version Number
  • Simplified DOM element rendering
  • Improved SVG support
  • New helpful warnings

Version Number

Before v15.0.0, the previous React version dubbed React 14 or 0.14.x had the leading 0 has caused some confusion in the community, leading some to believe that it wasn’t yet ready to use in production.

Version naming change helps indicate our commitment to stability and gives us the flexibility to add new backwards-compatible features in minor releases – Sebastine Markbåge

The project will continue to follow the semver guidelines, in the future versions. That means the major version will change for the breaking changes, backward compatible versions will have a minor version change and the bug fixes will increase the patch version.

Simplified DOM element rendering

The way React renders the elements has changed in two areas:

  • No more data-reactid attributes
  • No more span elements (for plain text)

Let’s compare the render output in different versions:

v0.14.0

<div data-reactid=".0.0.5">
  <span data-reactid=".0.0.5.0">Hello</span>
  <span data-reactid=".0.0.5.1">world</span>
</div>

v15.0.0

<div>Hello world</div>

Removal of spans helps to clear DOM clutter as well as reduces the file size of components.

Improved SVG support

In React v15 claims to support all the SVG attributes that are recognized by today’s browsers.

The RC version left us in an inconsistent state for our HTML and SVG behaviors. That’s not awesome as there are already a number of things that must be learned for React and throwing in another inconsistency doesn’t help. So we’ll backpedal for now but still continue to provide full SVG support by going back to our previous whitelist and expanding it. – Paul O’Shannessy

New helpful warnings

There are number of useful warnings added to React v15.

If your styles contain width for example, you can pass in a numeric value as a number without the unit(eg: px). But if you pass in the value as a string, React will warn you.

Correct

<div style="{{width:" 20}}></div>

Warning

<div style={{width: "20"}}></div>

As for event handlers, the event handler names are case sensitive. Incorrect case would prompt React to throw a warning.

Correct

<button onClick="{{onClick}}"></button>

Warning

<button onclick="{{onclick}}"></button>