React & React Native

shellzhang

2015-04-24

• React is a JavaScript library for creating user interfaces by Facebook and Instagram.
• Many people choose to think of React as the V in MVC.
• React uses two main ideas.

• • Simple

    • Simply express
    • automatically manage all UI updates when data changes
    • When the data changes, React knows to only update the changed parts.

  • Declarative

一些关键概念

• JSX语法
  • 通过https://fb.me/JSXTransformer-0.13.2.js进行在线编译
  • 举个栗子
• props && state
  • props are a way of passing data from parent to child. 
  • Sometimes you need to respond to user input, a server request or the passage of time. For this you use state.
  • 举个栗子
• 数据单向绑定

React的一些设计思想

1. One of the many great parts of React is how it makes you think about apps as you build them. 

   1. ​single responsibility principle 单一职责原理

2. Try to keep as many of your components as possible stateless. 

3. A common pattern

   1. To create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via props. 

   2. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way.

React的一些设计思想

4. How to figure out state:

• Is it passed in from a parent via props? If so, it probably isn't state.​
• Does it change over time? If not, it probably isn't state.
• Can you compute it based on any other state or props in your component? If so, it's not state.

举一个复杂的栗子。。

HTML is just the beginning.

• Facebook has dynamic charts that render to <canvas> instead of HTML.
• Instagram is a "single page" web app built entirely with React and Backbone.Router. Designers regularly contribute React code with JSX.
• We've built internal prototypes that run React apps in a web worker and use React to drive native iOS views via an Objective-C bridge.
• You can run React on the server for SEO, performance, code sharing and overall flexibility.
• Events behave in a consistent, standards-compliant way in all browsers (including IE8) and automatically use event delegation.

React Native

用我们熟悉的语言，

去侵蚀客户端吧

还没写完。。。