React Study Notes

React Learning
Get ready
Package Console
You can use NPM command NPM install-package react.js
NuGet search react installs the corresponding version of Reactjs.net
Add///_reference.js to add automatic hints
Api
React
Creating a Component Class--reactclass
React.createclass (Object specification)
Implementing the Reader () method
Create Reactelement
React.createelement (Reactclass,props,children ...)
Reactclass can be div,span, too.
Property
Type
Props
Key
Ref
React.createfactory (String/reactclass type)
When a component instance is created in bulk
REACT.DOM.UL () factory functions for built-in HTML tags
React.render--reactcomponent
React.render (reactelement element,domelement Container,[function callback])
React.unmountcomponentatnode (DomElement Container)
Remove, return True remove succeeded, false is no component removed
React.rendertostring (reactelement Element)
Render as HTML string, only used on server side, facilitate fast, SEO
React.rendertostaticmarkup (reactelement Element)
Renders as HTML strings, similar to rendertostring, but removes extra property payments,
React.isvalidelement (* object)
Determine if an object is a reactelement
React.dom
Wrapper DOM: For example, React.DOM.div (null, ' Hello world! ')
React.proptypes
Contains a common type for validating props
React.initializetouchevents (Boolean Shouldusetouch)
Configure enable processing touch time
React.children
Handling This.props.children
React.Children.map (object Children, function fn [, object context])
Each subset call Fn,map returns the object
React.Children.forEach (object Children, function fn [, object context])
Traversal, no object returned
React.Children.count (Object children)
Total number of components returned
React.Children.only (Object children)
Returns the only subset, otherwise throws an exception

Default Prop Value
var componentwithdefaultprops = React.createclass ({
Getdefaultprops:function () {
return {
Value: ' Default value '
};
}
/* ... */
});
Mixins multiplexed Code (embedded), high order (extended)
Reactcomponent
The This in the component method can access the instance, and can only be accessed with the return value of the saved React.render in addition to the react, in other components through refs
SetState (object nextstate[, function callback])
Merge Nextstate and current state
Do not change this.state directly, and use SetState to update and trigger UI updates
After SetState, This.state does not necessarily synchronize immediately,
The redraw is always triggered after the call, unless Shouldcomponentupdate is implemented
Replacestate (object nextstate[, function callback])
Similar to SetState, but the previous state will be deleted
ForceUpdate ([function callback])
Will cause the call to render ()
Getdomnode () return domelement
Get DOM node
Ismounted ()
Judging whether to render
SetProps (object nextprops[, function callback])
Setting properties, triggering rendering, but not for subcomponents
Replaceprops (object nextprops[, function callback]),
Replace
Component method
Render Rendering return component
Getinitialstate Initial state value
Getdefaultprops Initial Props Value
Proptypes Test prop Type
Mixins Mixed shared component behavior
Statics static method
DisplayName Debugging Information
Componentwillmount mount, render before calling
Componentdidmount mount, call after rendering
Componentwillreceiveprops update, called when a new props is accepted, initially not called
Shouldcomponentupdate is updated, accepted to the new props or state, before rendering is called, and the initial not called
Componentwillupdate Update, before accepting to a new props or state, the initial does not call
Componentdidupdate Update, the component is called after it is updated to the DOM, initially not called
Componentwillunmount is removed, the component is called when it is removed from the DOM,
Form components
The default HTML tag has the corresponding react component
Interactive properties
Value for Input,textarea components
Checked for Checkbox,radio
Selected for option
OnChange input textarea value changes when the checked of input changes, when option selected changes
Restricted Components
Input with value set is a restricted component, rendered HTML cannot change value and needs to be changed in onchange with SetState
Non-Restricted components
No value or null input is set as an unrestricted component
or set DefaultValue to set the initial value, select also supports DefaultValue
Event System
Virtual Event object,
The event handler will pass into the virtual event object's forces, with the same properties and methods as the browser's local events
Nativeevent getting the underlying browser event object
Boolean bubbles
Boolean cancelable
Domeventtarget Currenttarget
Boolean defaultprevented
Number Eventphase
Boolean istrusted
DomEvent nativeevent
void Preventdefault ()
void Stoppropagation ()
Domeventtarget Target
Number TimeStamp
String type
Supported events
General support is triggered during the event bubbling phase,
To trigger an event handler during the capture phase,
Clipboard event Oncopy oncut onpaste properties: Domdatatransfer clipboarddata
Keyboard Event OnKeyDown onKeyPress OnKeyUp property: Boolean Altkey
Number CharCode
Boolean Ctrlkey
function Getmodifierstate (key)
String Key
Number KeyCode
String locale
Number Location
Boolean Metakey
Boolean repeat
Boolean Shiftkey
Number which
Focus Event onfocus OnBlur property: Domeventtarget relatedtarget
Form Event OnChange oninput OnSubmit property:
Mouse event OnClick OnDoubleClick ondrag ondragend ondragenter ondragexit ondragleave ondragover ondragstart onDrop onMouseDown o Nmouseenter onmouseleave onMouseMove onmouseout onMouseOver onMouseUp Properties: Boolean Altkey
Number button
Number buttons
Number ClientX
Number ClientY
Boolean Ctrlkey
function Getmodifierstate (key)
Boolean Metakey
Number PageX
Number Pagey
Domeventtarget Relatedtarget
Number ScreenX
Number ScreenY
Boolean Shiftkey
Touch Event Ontouchcancel Ontouchend ontouchmove Ontouchstart
Call React.initializetouchevents before rendering (true);
Property
Boolean Altkey
Domtouchlist changedtouches
Boolean Ctrlkey
function Getmodifierstate (key)
Boolean Metakey
Boolean Shiftkey
Domtouchlist targettouches
Domtouchlist touches
UI Events
Onscroll Properties: Number Detail Domabstractview view
Mouse wheel Scrolling Event Onwheel property: Number Deltamode number DeltaX number DeltaY number Deltaz
Differences in DOM
All DOM properties and attributes should be hump named, except for data-* and aria-*
The style property receives a JavaScript object with a camel name instead of a CSS string
All event objects are consistent with the specifications, including bubbling
OnChange event triggering when the field changes instead of losing focus
Non-dom Properties
Key optional unique identity (the sibling node is unique, does not need to be globally unique), when the component is re-rendered, the order may be destroyed after the destruction of the reconstruction after the binding key can be detected in the presence of
Ref binds to a component of the reader output, which can be this.refs.refname to a component instance
Dangerouslysetinnerhtml provides the ability to insert pure HTML

tags and attributes
React supports all common HTML tags
SVG element, React-art plug-in supports rendering to Canvas,svg (ie-8)
Support for all data-*,aria-* properties,
Classname,htmlfor
Hump named,
Supports HTML standard properties
SVG properties

React Study Notes