Кратко о React
Алексей Плуталов, Злые марсиане
Алексей Плуталов, Злые марсиане
$(function ($) {var notify = function (msg, type) {var html;html = "<div class='ntf ntf-" + type + "'>" + message + "</div>";$("body").append(html);};window.notify = notify;})(jQuery);
<head><title>{{ title }}</title></head>
function (title) {return "<head><title>" + title + "</title></head>";}
Итог: неизвестность структуры и трансформаций конечного DOM
Как правило, этот этап является бутылочным горлышком.
Одни и те же медленные процессы.
/** @jsx React.DOM */<h1 className="user-name">User:<span className="user-name__cnt">{ userName }</span></h1>
DOM узлы связываются в единое DOM-дерево.
Итог: детерминированность структуры и трансформаций.
Создание фрагмента DOM:
Модификация производится путем DOM-операций.
Библиотека для разработки пользовательского интерфейса
/** @jsx React.DOM */var Greeting = React.createClass({render: function () {return <div>Привет, { this.props.welcomed }!</div>;}});React.render(<Greeting welcomed="коллеги" />, document.body);
<div>Привет, { this.props.welcomed }!</div>
React.createElement("div", null, "Привет, ", this.props.welcomed, "!")
this.propsthis.propTypesthis.getDefaultPropsthis.setPropsthis.replacePropsДанные влияющие на внешний вид компонента.
this.statethis.getInitialStatethis.setStatethis.replaceStatethis.getDefaultPropsthis.getInitialStatethis.componentWillMountthis.componentDidMountthis.componentWillReceivePropsthis.shouldComponentUpdatethis.componentWillUpdatethis.componentDidUpdatethis.componentDidUnmountthis.rendernull или false
var LoginForm = React.createClass({componentDidMount: function () {if (this.props.email.length === 0) {this.refs.email.getDOMNode().focus();} else {this.refs.password.getDOMNode().focus();}},render: function () {return (<form><input type="text" ref="email" value={ this.props.email } /><input type="password" ref="password" value="" /></form>);}});
var Clicker = React.createClass({getInitialState: function () {return { count: 0 };},handleClick: function (e) {e.preventDefault();this.setState({ count: this.state.count + 1 });},render: function () {return <button onClick={ this.handleClick }>{ this.state.count } />}});
