React(JSX语法)----动态UI

1.React honws how to bubble and capture events according to the spec,and events passed to your event handler are guaraneed to be condidtent with the W3C spec，regardless of which brower you're using.

　　if you'd like to use React a couch device such as a phone or tablet,simply call React.initialzeTouchEvents(true);to enable touch event handing.

2.Autobinding and Event Delegation

　　Autobinging:With React,every method is automatically bound to its component instance.React caches the bound method such that id's extremely CPU and memory efficient.It's also less typing.

　　Event delegation:React doesn't actually attach event handlers to the nodes themselves. When React starts up, it starts listening for all events at the top level using a single event listener. When a component is mounted or unmounted, the event handlers are simply added or removed from an internal mapping. When an event occurs, React knows how to dispatch it using this mapping. When there are no event handlers left in the mapping, React's event handlers are simple no-ops. To learn more about why this is fast, see David Walsh's excellent blog post.

3.Components are Just State Machines:

　　In React,you simply update a component's state,and then render a new UI based on this new state.React tabkes care of updating the DOM for you in the most efficient way.

4.State work

　　A common way to inform React of a data change is by calling setState(data, callback). This method merges data into this.state and re-renders the component. When the component finishes re-rendering, the optional callback is called. Most of the time you'll never need to provide a callback since React will take care of keeping your UI up-to-date for you

5.What component should have state

　　A common pattern is 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 viaprops. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way.

6.waht should go in State

　　State should contain data that a component's event handlers may change to trigger a UI update.

7.What should'd go in state　　

　　this.state should only contain the minimal amount of data needed to represent your UI's state. As such, it should not contain:

• Computed data: Don't worry about precomputing values based on state — it's easier to ensure that your UI is consistent if you do all computation within render(). For example, if you have an array of list items in state and you want to render the count as a string, simply render this.state.listItems.length + ' list items' in yourrender() method rather than storing it on state.
• React components: Build them in render() based on underlying props and state.
• Duplicated data from props: Try to use props as the source of truth where possible. One valid use to store props in state is to be able to know it's previous values, because props can change over time.