twitter.com/ticabri
github.com/enguerran
Enguerran Colson
Qui a déjà galéré sur de la synchro d'UI et de modèle ?
"your code calls a library, a framework calls your code"
Three states → Six transitions
N states → (N² - N) transitions
if(count > 99) {
if(!isOnFire()) addFire();
} else {
if(isOnFire()) removeFire();
}
if(count === 0) {
if(hasSome()) removeSome();
notification.innerHTML = '';
} else {
if(!hasSome()) addSome(count);
var countText = count > 99 ? '99+' : count.toString();
notification.innerHTML = countText;
}
Describes computation in terms of statements that change a program state
render: function() {
if(count === 0) {
return (<div class="notification"></div>);
} else if(count <= 99) {
return (<div class="some notification">{count}</div>);
} else {
return (<div class="some notification onfire">99+</div>);
}
}
We model the states and not the transitions
var ProductTable = React.createClass({
render: function() {
var rows = [];
this.props.products.forEach(function(product) {
rows.push(<ProductRow product={product} key={product.name} />);
});
return (
<table>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
);
}
});
var ProductRow = React.createClass({
render: function() {
var name = this.props.product.stocked ?
this.props.product.name :
<span style={{color: 'red'}}>
{this.props.product.name}
</span>;
return (
<tr>
<td>{name}</td>
<td>{this.props.product.price}</td>
</tr>
);
}
});
Configuration des composants
Hérités donc immuables
Un component donne les props aux enfants
States changent au cours du temps
Un component gère son propre état
Représentation sérializable, un snaptshot
React utilise un virtual DOM et ne va accéder au vrai DOM que si nécessaire.
React crée un virtual DOM à chaque fois que les components sont dessinés et le compare avec le précédent pour déterminer la plus légère modification à apporter au DOM.
React + (Angular || Backbone || Ember)
React Elements : intégration avec les bibliothèques tierces ➥
Architecture flux ➥