Reactjs v0.14 changes

45daf58c77e9dbbab5a1c8a5afc7ac5c?s=47 koba04
September 07, 2015

Reactjs v0.14 changes

A slide of #reactjs_meetup #2 written about React.js v0.14

Edit 2015/09/17: Module pattern components are not Stateless Components

45daf58c77e9dbbab5a1c8a5afc7ac5c?s=128

koba04

September 07, 2015
Tweet

Transcript

  1. 5.
  2. 7.

    Stateless Components! • You can define ReactComponent with just a

    function! • More performance optimizations. • As minimal implementation in v0.14.
  3. 8.

    Stateless Components function Avatar(props) { return ( <div> <span>{props.name}</span> <img

    src={`/img/user/${props.id}.png`} /> </div> ); } function Modal({title, children}) { return ( <div className=“modal”> <p className=“modal-title”>{title}</p> {children} </div> ); }
  4. 9.
  5. 10.
  6. 11.
  7. 12.

    Stateless Components // PropTypes function Avatar({name, id) { return (

    <div> <span>{name}</span> <img src={`/img/user/${id}.png`} /> </div> ); } Avatar.defaultProps = {name: ‘default’, id: 999}; Avatar.propTypes = { name: React.PropTypes.string.isRequired, id: React.PropTypes.number.isRequired };
  8. 13.

    Stateless Components // Context function Avatar({name, id, context) { const

    {staticHost} = context; return ( <div> <span>{name}</span> <img src={`${staticHost}/img/user/${id}.png`} /> </div> ); } Avatar.contextTypes = { staticHost: React.PropTypes.string };
  9. 14.

    Stateless Components // Module pattern function Avatar({name, id) { return

    { render() { return ( <div> <span>{name}</span> <img src={`/img/user/${id}.png`} /> </div> ); }, shouldComponentUpdate(nextProps) { return this.props.name !== nextProps.name; } }; } Sorry, I’ve misunderstood… This is not treated as Stateless Components
  10. 15.

    DOM node refs • You can get DOM nodes as

    the DOM Component refs! • React.render with DOM Component returns DOM nodes • ReactDOM.findDOMNode still uses for Composite Component.
  11. 16.

    DOM node refs class App extends React.Component { componentDidMount() {

    this.refs.text.focus(); } render() { return <input type=“text” ref=“text” />; } } const el = React.render(<div><App /></div>, document.querySelector(‘#app’)); console.log(el.innerHTML); const app = React.render(<App />, document.querySelector(‘#app’)); console.log(ReactDOM.findDOMNode(app).innerHTML);
  12. 17.

    Separate packages • React • Isomorphic libraries • ReactDOM •

    DOM Environment • Including server-side rendering • Addons • react-addons-{name}
  13. 18.

    React • npm install react; • import React from ‘react’;

    • React.Component, React.createElement, React.Proptypes, React.Children... • Isomorphic - DOM, Native, Canvas...
  14. 19.

    ReactDOM • npm install react-dom • import ReactDOM from ‘react-dom’;

    • ReactDOM.render, ReactDOM.findDOMNode, ReactDOM.unmountComponentAtNode... • import ReactDOMServer from ‘react-dom/server’; • ReactDOMServer.renderToString, ReactDOMServer.renderToStaticMarkup
  15. 20.

    import React from ‘react’; import ReactDOM from ‘react-dom’; class App

    extends React.Component { render() { const {name} = this.props; return ( <div> <p>Hello {name}</p> </div> ); } } ReactDOM.render(<App name=“World />, document.getElementById(‘app’));
  16. 21.

    Addons • npm install react-addons-{name} • transition-group, css-transition-group, • linked-state-mixin,

    pure-render-mixin, • create-fragment, shallow-compare, • update, clone-with-props, • test-utils, perf
  17. 22.

    unstable_batchedUpdates • Deprecate React.addons.batched_updates const c = ReactDOM.render(<App />, document.querySelector('#app'));

    ReactDOM.unstable_batchedUpdates(() => { c.setState({count: c.state.count}); c.setState({count: c.state.count}); });
  18. 23.

    src ᵓᴷᴷ addons ᴹ ᵓᴷᴷ link ᴹ ᵓᴷᴷ transitions ᵓᴷᴷ

    isomorphic ᴹ ᵓᴷᴷ children ᴹ ᵓᴷᴷ classic ᴹ ᴹ ᵓᴷᴷ class ᴹ ᴹ ᵓᴷᴷ element ᴹ ᴹ ᵋᴷᴷ types ᴹ ᵓᴷᴷ deprecated ᴹ ᵋᴷᴷ modern ᴹ ᵓᴷᴷ class ᴹ ᵓᴷᴷ element ᴹ ᵋᴷᴷ types ᵓᴷᴷ renderers ᴹ ᵓᴷᴷ dom ᴹ ᴹ ᵓᴷᴷ client ᴹ ᴹ ᵓᴷᴷ server ᴹ ᴹ ᵋᴷᴷ shared ᴹ ᵋᴷᴷ shared ᴹ ᵓᴷᴷ event ᴹ ᵋᴷᴷ reconciler ᵓᴷᴷ shared ᴹ ᵓᴷᴷ stubs ᴹ ᵓᴷᴷ utils ᴹ ᵋᴷᴷ vendor ᵋᴷᴷ test
  19. 24.

    Deprecate react-tools • use Babel instead of react-tools • jsx

    command -> babel • reactify -> babelify • JSXTransform -> babel-core/browser.js • node-jsx -> babel/register
  20. 25.
  21. 26.

    React Babel • Babel optimisation options for React. • optimisation.react.constantElements

    • optimisation.react.inlineElements • for production build.
  22. 28.

    constantElements class App extends React.Component { render() { return <div><span>hello</span><span>{this.props.name}</span></div>;

    } } // ↓↓ var _ref = _react2['default'].createElement(‘span', null, 'hello'); var App = (function (_React$Component) { // … _createClass(App, [{ key: 'render', value: function render() { return _react2['default'].createElement( ‘div’, null, _ref, _react2['default'].createElement(‘span', null, this.props.name) ); } }]);
  23. 29.

    inlineElements ReactDOM.render( <App name=“foo”><div>foo</div></App>, document.getElementById(‘app') ); // ↓↓ _reactDom2['default'].render({ type:

    App, ref: null, props: _defaultProps(App.defaultProps, { children: { type: 'div', ref: null, props: {children: 'foo'}, key: null }, name: 'foo' }), key: null }, document.getElementById('app'));
  24. 31.

    Presets • babel-preset-react // index.js module.exports = { plugins: [

    require("babel-plugin-jsx"), require("babel-plugin-flow"), require("babel-plugin-react-jsx"), require("babel-plugin-flow-comments"), ] };
  25. 32.

    Others • Allow arbitrary attributes on dashed tags. • Object.freeze

    props in createElement in DEV. • Make React.addons.createFragment return a toArray. • Kill _isReactElement and ComponentClass.type. • Deprecated React.addons.cloneWithProps. me!
  26. 33.
  27. 34.
  28. 35.

    v0.15? • Garbage collection release • Shortly after 0.14? •

    Remove monkey patching of DOM elements for refs. • Remove deprecated APIs, making properly decoupled • Deprecate replaceState and isMounted? • Add trusted key for ReactElements?
  29. 36.
  30. 37.