Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React.js

 React.js

E1873b75f09c042ef07fe136ba2446f6?s=128

Georgy Angelov

June 24, 2016
Tweet

Transcript

  1. None
  2. #КОЙ създаде React?

  3. None
  4. None
  5. None
  6. React не е нещо младо и неузряло

  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. Лето Божие 2015

  18. #КОЙ използва React?

  19. None
  20. Малко теория

  21. Mutable (stateful) UI

  22. Първоначални данни функция 1 Първоначален интерфейс

  23. Променени данни функция 3..+inf Промяна на интерфейса Нови данни (сървър)

    функция 4
  24. Declarative UI

  25. Данни Интерфейс функция 2 UI декларация Нови данни (сървър)

  26. <ul> <li ng-repeat="beer in beers"> {beer.brand} - {beer.likes} </li> </ul>

  27. Immutable UI

  28. Данни функция 1 Интерфейс функция 2 Нови данни (сървър)

  29. function render(beers) { return '<ul>' + beers.map(render_beer) + '</ul>'; }

    function render_beer(beer) { return '<li>' + beer.brand + ' ' + beer.likes + '</li>; }
  30. Immutable != Declarative

  31. React

  32. None
  33. React

  34. A JavaScript library for building user interfaces

  35. Getting started <script src="http://fb.me/react-0.13.1.js"></script> <script src="http://fb.me/JSXTransformer-0.13.1.js"></script>

  36. Hello World

  37. JSX • Синтактичен трансформатор • Вграден ECMAScript 6 transpiler (с

    опция --harmony) • Client-side & Server-side поддръжка
  38. JSX <Component a1={code}, a2="str">children</Component>  React.createElement(Component, { a1: code, a2:

    "str" }, children);
  39. JSX var Component = React.createClass({ … });  var Component

    = React.createClass({ displayName: "Component", … });
  40. Virtual DOM

  41. Virtual DOM • Структура от данни, скриваща мутациите върху DOM

    елементите • Представлява йерархия от обекти • Симулира immutable UI • Бърз алгоритъм за намиране на разлики
  42. Алгоритъм

  43. Алгоритъм var oldDOM = rootComponent.getCurrentVirtualDOMObject(), newDOM = rootComponent.render(); React.applyDifferences(oldDOM, newDOM);

  44. body { header(className="menu") { ul { li(href=…) { начало },

    li(href=…) { вход }, li(href=…) { регистрация } }, }, div(className="users") { h1 { Пешо } h1 { Гошо } }, footer { Copyright 2015 ® } } IndexPage { NavigationMenu, IndexPageContent { UserList }, Footer } render Йерархия от React компоненти VirtualDOM
  45. div(className="test") { h1 { Здравей! } h2 { Тук си

    от 1234 милисекунди! } } HelloWorld { state: { initialTime: [Date Object], time: [Date Object] }, render() { ... } } render React компонент VirtualDOM елемент
  46. div(className="test") { h1 { Здравей! } h2 { Тук си

    от 1234 милисекунди! } } render VirtualDOM елемент Browser DOM <div class="test"> <h1>Здравей!</h1> <h2>Тук си от 1234 милисекунди!</h2> </div>
  47. div(className="test") { h1 { Здравей! } h2 { Тук си

    от 1234 милисекунди! } } diff Стар виртуален DOM Нов виртуален DOM div(className="test") { h1 { Здравей! } h2 { Тук си от 1222 милисекунди! } }
  48. div(className="test") { h1 { Здравей! } h2 { Тук си

    от 1234 милисекунди! } } Разлики Променен HTML <div class="test"> <h1>Здравей!</h1> <h2>Тук си от 1234 милисекунди!</h2> </div> apply diff <div class="test"> <h1>Здравей!</h1> <h2>Тук си от 1222 милисекунди!</h2> </div>
  49. Заради Virtual DOM... Може да се рендерира не само HTML:

    • React Native • React Canvas • React QT* • React GTK* • React WPF*
  50. React Native sneak peek var App = React.createClass({ render: function()

    { return ( <TabBarIOS> <TabBarIOS.Item title="React Native" selected={true}> <NavigatorIOS initialRoute={{ title: 'React Native' }} /> </TabBarIOS.Item> </TabBarIOS> ); } });
  51. Server-side rendering DEAL WITH IT

  52. Data flow

  53. Компонент props state Родител state Компонент state Компонент state

  54. Props render() { return <User name="Кучо Кучев" online={true} position={ <span><i>Senior</i>

    dog specialist</span> } onSelect={function() { ... }} /> }
  55. Props render() { return ( <div onClick={this.props.onSelect}> <h1> {this.props.name} {this.props.online

    && <i>online</i>} </h1> <h2>{this.props.position}</h2> </div> ); }
  56. Prop Validation User.propTypes = { name: React.PropTypes.string.isRequired, online: React.PropTypes.bool, position:

    React.PropTypes.element, onSelect: React.PropTypes.func.isRequired };
  57. Prop Defaults User.defaultProps = { online: false, position: <i>unknown</i> };

  58. Properties • Immutable • Може да се подменят само от

    родител • При подмяна се пререндерира • componentWillReceiveProps, … • Може да са всякакви JS обекти • Може да се валидират
  59. State • Вътрешно състояние за компонент • Може да се

    променя и чете само отвътре • При промяна се пререндерира • componentWillUpdate, componentDidUpdate • Отново, може да съдържа всичко • Променя се само чрез `setState`
  60. Events • Custom event система – "оправя" разлики в браузърите

    • Clipboard, Keyboard, Mouse, Touch, Focus, Form, Scroll & Wheel • Закачат се като property-та на елементите
  61. Events render() { return ( <form onSubmit={function() {...}}> <textarea placeholder={

    Why do you want to destroy the world? } /> <button className="big red btn"> Launch nukes </button> </form> ); }
  62. Data loading • componentDidMount • componentWillReceiveProps

  63. Data loading componentDidMount() { ajax('user/all', function(users) { this.setState({users: users}); }.bind(this));

    }
  64. Events componentDidMount() { ajax('user/all', (users) => { this.setState({users: users}); });

    }
  65. References class SearchForm extends React.Component { clear() { this.setState({text: ''});

    } ... }
  66. References render() { <SearchForm ref="searchForm" onSearch={...} /> <ClearButton onClear={this.clear.bind(this)} />

    } clear() { this.refs.searchForm.clear(); }
  67. Демота

  68. Обобщение

  69. JSX – синтаксис за вграждане на HTML-о-подобни тагове в JS

  70. Virtual DOM – структурата, която моделира HTML елементите

  71. Data flow – events, props, states

  72. Възможност за други имплементации (React Native) и Server-side rendering

  73. Добра енкапсулация

  74. Бърза разработка

  75. Лесно unit тестване (без браузър)

  76. None