React Official Website Study notes

Source: Internet
Author: User

Origin
1. React does not generate DOM from HTML fragments of type string
2. Calling SetState () in componentwillreceiveprops does not trigger Re-render
3. This.setstate () cannot be called in Componentwillupdate
4, before the acquisition of data through Ajax, call This.setstate (), should be this.ismounted () to determine that the current component is already in the completion stage of rendering
5, the parent component to the child component passes the data through the props, the child component passes the data to the parent component to handle through the global event mode, namely accepts the event processing of all subcomponents on the root element
6. Mobile device touch events need to be turned on manually: React.initializetouchevents (True)
7. Callback in SetState (data, callback) is called after Re-render completes.

FLUX
1. Dispatcher distributing event names and data from page event behavior to the global store
2, Dispather to register a variety of events and their corresponding behavior (update store)
3, by using a class library like Microevent.js, to provide the store with the object's event behavior, listen to its data changes
4, the behavior of registering store in the Componentdidmount, in the Componentwillunmount to unbind the store behavior

JSX
1. The variable name of the component must be capitalized to differentiate between native HTML tags and custom components
2. Use curly brace-wrapped JS expression to represent the attributes of the component, instead of the double quotation marks of the native notation
3. If you want to add a custom attribute to the HTML element that is finally loaded, you must use the prefix "data-"
4, props should be used as an immutable constant, not Component.props.foo = x such use
5, <Component {…someObj} /> You can write all the attributes in the someobj into the component props
6, the <Component {…someObj} attr=“higherLevel" /> attr property in the Someobj will be replicated in the same name property
7. JSX encapsulates the syntax of the react native interface for the class XML protocol, making it easier to write
8, get the Parent property with This.props, get the embedded child element with This.props.children
9, in order to prevent XSS attacks, provide security, when inserting the native HTML, you need to use

<span dangerouslySetInnerHTML={{__html: rawHtml}}>

10, CSS embedded style, must accept an object, its key is a CSS property name, multi-word attribute using small hump, if you need to add browser vendor prefix, the prefix must be capitalized
11, in addition to certain elements specified (http://facebook.github.io/react/tips/style-props-value-px.html
), the value of the attribute in the style is added to the ' px ' suffix if it is a pure number, such as {height:10} compiled into height:10px
12. Pass all props of the current component to one of its subcomponents via This.transferpropsto (subcomponent), or pass through {... this.props}

React Official Website Study notes

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.