"Go" React.js overview

Translated from: http://segmentfault.com/blog/jiyinyiyong/1190000000693651

Here is an outline of the collection of React information, the details of the following links,
Weibo is frequently updated, and will be synced to the back page over time:
Http://weibo.com/reactchina
http://react-china.org/collections/
There is a list of the finishing on GitHub:
Https://github.com/enaqx/awesome-react

Project Source

I have heard two statements in video and audio recordings:

One is that Facebook has previously used a template to render, using two-way bindings, but the application complexity has increased
Because the data has only complex relationships, the code that is added later can easily break the previous functionality
So React used to solve this problem because DOM is always rendered with data and is not prone to error.

Another way of saying that Facebook has XHP improved PHP is to handle HTML escaping more securely:
Https://github.com/facebook/xhp
Moreover, the function of defining and nesting Component is realized in XHP, and the reuse module is very clear.
In order to replicate the success of the back-end technology to the front end, we did a JSX, inserting a similar data structure at the front end
and want to do every time there is data update, the entire page rendering, and avoid complex state maintenance
Finally, it optimizes performance even better than handwriting through DOM diff.

Function

The React framework itself, as a V presence in MVC, provides two functions:

• Rendering and maintaining the DOM
• Listen for DOM events

The other benefits are:

• The React Component is well designed for modularity
• Component and Dom benefit from the diff and merge operations of Virtual DOM, with improved performance
• Without the complex relationship of Model, writing application logic is very clear
• Service-Side rendering

Debugging Tools

Chrome extension makes it easy to see the Component corresponding props and state
Https://github.com/facebook/react-devtools

Since Chrome already has the ability to automatically compile JavaScript, plus the React refresh mode
Code hot Swap can be done to quickly update the code on the interface after changes have been made

Flux

The simple difference between the application of the front-end single page and the commonly used architecture is seen here:

The actual structure will be more complex, such as the division of modules between Backbone,
At least one of the unidirectional loops that is not shown on the diagram can be found:

And, in fact, MVC can easily be written like this, creating a complex relationship between the View Model:

Flux, in turn, adjusts to MVC and goes back to the one-way loop that approximates MVC:

Community Active People

Pete Hunt, Instagram Engineer, is about to leave Facebook
Engineers who develop React can look at this related post:
https://www.facebook.com/pwh/posts/10101869605197995
Pete had a lot of speeches about React in September, a very important resource to understand React.
Twitter Account Https://twitter.com/floydophone

Ben Alpert, @spicyj is an engineer at Khan Academy.
Https://github.com/spicyj
The community sees a lot of places he's involved.

Christopher Chedeau @vjeux is a Facebook engineer
http://blog.vjeux.com/
If you search for tutorials online, it's easy to search his blog and he also has a video of a speech

Companies that use React

Some of the companies used are recorded on the Wiki of the official warehouse:
Https://github.com/facebook/react/wiki/Sites-Using-React

React, Facebook uses React for all Instagram stations.
Khan Academy's editor was React.
Other companies don't know

Domestic hear pea pod, watercress, Wiredcraft has been used in production environment React
The information is not very accurate, try to collect more out later.

Module

The module is currently not rich enough to compare with other mv* frameworks and should soon catch up,
Currently the module is mainly on NPM, through the label can be declared, here to view:
http://react-components.com/

Functional Programming: Immutable data

Component's props is considered to be non-modifiable, ensuring that the same data gets a consistent interface
With the Clojurescript data invariance in the Om, the performance is even higher
Facebook has open-source their library of immutable data structures:
Https://github.com/facebook/immutable-js

Lazy calculation dip point edge. The DOM tree is not updated every time, but instead caches the content after the calculation, avoiding redundant computations

Some functional programming languages also accept React or Virtual DOM for writing the interface:
Om (Clojurescript), Eliom (OCaml), Purescript, ELM

Responsive programming

Functional reactive programming, the language of the Representative is ELM
React and ELM are very similar, Component combinations, data invariance, Virtual DOM

Https://github.com/component/reactive
Https://github.com/yang/reactive-coffee
http://reactive-extensions.github.io/RxJS/
http://baconjs.github.io/
http://elm-lang.org/

Contrast

ractive:http://blog.ractivejs.org/posts/whats-the-difference-between-react-and-ractive/

Angular:?

Ember:https://docs.google.com/presentation/d/1afmltcprxhjpurq97vbhczklbr1tesrnd3yyxusq5yy/edit

Backbone:?

Vue:https://github.com/yyx990803/vue/wiki/faq

Web components:http://programmers.stackexchange.com/questions/225400/ Pros-and-cons-of-facebooks-react-vs-web-components-polymer

Performance

Pete had a speech, and he did a more in-depth analysis Www.youtube.com/watch?v=h3KksH8gfcQ

Todo's test: http://vuejs.org/perf/

DOOM 3 Render Schema: http://fabiensanglard.net/doom3/renderer.php

"Go" React.js overview