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

React.js

 React.js

Georgy Angelov

June 24, 2016
Tweet

More Decks by Georgy Angelov

Other Decks in Programming

Transcript

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

    function render_beer(beer) { return '<li>' + beer.brand + ' ' + beer.likes + '</li>; }
  2. JSX • Синтактичен трансформатор • Вграден ECMAScript 6 transpiler (с

    опция --harmony) • Client-side & Server-side поддръжка
  3. JSX var Component = React.createClass({ … });  var Component

    = React.createClass({ displayName: "Component", … });
  4. Virtual DOM • Структура от данни, скриваща мутациите върху DOM

    елементите • Представлява йерархия от обекти • Симулира immutable UI • Бърз алгоритъм за намиране на разлики
  5. 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
  6. div(className="test") { h1 { Здравей! } h2 { Тук си

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

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

    от 1234 милисекунди! } } diff Стар виртуален DOM Нов виртуален DOM div(className="test") { h1 { Здравей! } h2 { Тук си от 1222 милисекунди! } }
  9. 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>
  10. Заради Virtual DOM... Може да се рендерира не само HTML:

    • React Native • React Canvas • React QT* • React GTK* • React WPF*
  11. 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> ); } });
  12. 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> ); }
  13. Properties • Immutable • Може да се подменят само от

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

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

    • Clipboard, Keyboard, Mouse, Touch, Focus, Form, Scroll & Wheel • Закачат се като property-та на елементите
  16. 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> ); }