EggHead React Cheetsheet

2020-02-27 197浏览

  • 1.React Cheat Sheet (0.14.7) PAGE 1 import React from 'react' class ExampleComponent extends React.Component { ... } React.createClass( REACTCOMPONENT SPECIFICATION ) React.createElement( HTMLTAG STRING REACTCLASS , ↳ ⇒ ⇒ , {PROPS}? Clone and return a new ReactElement using element as the starting point with shallow merged props. Verifies the object is a ReactElement. HTML Attributes   Equivalent to above ES6 class notation.NOTE:Prefer the above ES6 usage ReactClass [CHILDREN...]? ) ⇒ ReactElement Create and return a new ReactElement of the given type. JSX nodes desugar into createElement() calls, e.g.becomes React.createElement(Node …) React.cloneElement( REACTELEMENT , React.isValidElement( REACTELEMENT {PROPS}? ⇒ ) , [CHILDREN...]? ) ⇒ ReactElement Boolean import ReactDOM from 'react-dom' ReactDOM.render( REACTELEMENT ↳ , , DOMELEMENT CALLBACK? ) ⇒ ReactComponent Render a ReactElement into the DOM into supplied DOMElement. ReactDOM.render(, document.getElementById(‘react-app’)) ReactDOM.findDOMNode( REACTCOMPONENT ⇒ ) If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. DOMElement ReactDOM.unmountComponentAtNode( DOMELEMENT ⇒ ) Remove a mounted React component from the DOM and clean up its event handlers and state. Boolean import ReactDOMServer from 'react-dom/server' ReactDOMServer.renderToString( REACTELEMENT ) ⇒ String ReactDOMServer.renderToStaticMarkup( REACTELEMENT CORE METHODS Component API Similar to renderToString, except this doesn't create extra DOM attributes such as data-react-id, that React uses internally. String , CALLBACK? ) ⇒ forceUpdate( CALLBACK? render() ⇒ constructor( ) ⇒ Performs a shallow merge of nextState into current state and triggers UI update. Callback after update. NEVER mutate this.state. void Calling forceUpdate() will cause render() to be called on the component, skipping shouldComponentUpdate(). Avoid usage. void A pure function that returns a ReactElement which relies upon props and state. REQUIRED. ReactElement void null PROPS ) { super(props); this.state = {...} } componentDidMount() ⇒ ⇒ StateObject Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. void shouldComponentUpdate( {NEXTPROPS} componentWillUpdate( {NEXTPROPS} , , componentDidUpdate( {PREVIOUSPROPS} ⇒ Invoked once before the component is mounted, returns this.state. Invoked once, both on the client and server, immediately before the initial rendering occurs. void componentWillReceiveProps( {NEXTPROPS} componentWillUnmount() ⇒ void ) ⇒ {NEXTSTATE} , Invoked when a component is receiving new props. This method is not called for the initial render. void {NEXTSTATE} ) ⇒ ) ⇒ {PREVIOUSSTATE} ) Invoked before rendering when new props or state are being received. Not called on initial render or when forceUpdate is used. Boolean ! Cannot use this.setState() void ⇒ void data  -* aria  -* accept   acceptCharset   accessKey   action   allowFullScreen   allowTransparency   alt   async   autoComplete   autoFocus   autoPlay   capture   cellPadding   cellSpacing   challenge   charSet   checked   classID   className   colSpan   cols   content   contentEditable   contextMenu   controls   coords   crossOrigin   data   dateTime   default   defer   dir   disabled   download   draggable   encType   form   formAction   formEncType   formMethod   formNoValidate   formTarget   frameBorder   headers   height   hidden   high   href   hrefLang   htmlFor   httpEquiv   icon   id   inputMode   integrity   is   keyParams   keyType   kind   label   lang   list   loop   low   manifest   marginHeight   marginWidth   max   maxLength   media   mediaGroup   method   min   minLength   multiple   muted   name   noValidate   nonce   open   optimum   pattern   placeholder   poster   preload   radioGroup   readOnly   rel   required   reversed   role   rowSpan   rows   sandbox   scope   scoped   scrolling   seamless   selected   shape   size   sizes   span   spellCheck   src   srcDoc   srcLang   srcSet   start   step   style   summary   tabIndex   target   title   type   useMap   value   width   wmode   wrapRDFa:about   datatype   inlist   prefix   property   resource   typeof   vocab    * FunctionSignature:(previousState, currentProps) => {stateVariable:newValue, ...} componentWillMount() LIFECYCLE METHODS ⇒ Render a ReactElement to its initial HTML. ExampleComponent extends React.Component {...} setState( FUNCTION * {NEXTSTATE} ↳ ) HTML Elements   a   abbr   address   area   article   aside   audio   b   base   bdi   bdo   big   blockquote   body   br   button   canvas   caption   cite   code   col   colgroup   data   datalist   dd   del   details   dfn   dialog   div   dl   dt   em   embed   fieldset   figcaption   figure   footer   form   h1   h2   h3   h4   h5   h6   head   header   hgroup   hr   html   i   iframe   img   input   ins   kbd   keygen   label   legend   li   link   main   map   mark   menu   menuitem   meta   meter   nav   noscript   object   ol   optgroup   option   output   p   param   picture   pre   progress   q   rp   rt   ruby   s   samp   script   sec vvbvtion   select   small   source   span   strong   style   sub   summary   sup   table   tbody   td   textarea   tfoot   th   thead   time   title   tr   track   u   ul   var   video   wb   Create a component class, given a specification. A component implements a render method which returns one single child. ReactClass Supported Tags in JSX   Invoked immediately before rendering when new props or state are being received. This method is not called for the initial render. Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial render. Invoked immediately before a component is unmounted from the DOM. SVG Elements   circle   clipPath   defs   ellipse   g   image   line   linearGradient   mask   path   pattern   polygoN   polyline   radialGradient   rect   stop   svg   text   tspan   SVG Attributes   clipPath   cx   cy   d   dx   dy   fill   fillOpacity   fontFamily   fontSize   fx   fy   gradientTransform   gradientUnits   markerEnd   markerMid   markerStart   offset   opacity   patternContentUnits   patternUnits   points   preserveAspectRatio   r   rx   ry   spreadMethod   stopColor   stopOpacity   stroke   strokeDasharray   strokeLinecap   strokeOpacity   strokeWidth   textAnchor   transform   version   viewBox   x1   x2   x   xlinkAcvtuate   xlinkArcrole   xlinkHref   xlinkRole   xlinkShow   xlinkTitle   xlinkType   xmlBase   xmlLang   xmlSpace   y1   y2   y
  • 2.React Cheat Sheet (0.14.7) PAGE 2 JSX Events Synthetic Event (default callback arg)   { BOOLEAN bubbles BOOLEAN cancelable DOMEVENTTARGET currentTarget BOOLEAN defaultPrevented NUMBER eventPhase BOOLEAN isTrusted DOMEVENT nativeEvent Component API (cont'd) NON-DOM TAGS keyAn optional, unique identifier. When your component shuffles around during render passes, it might be destroyed and recreated refReference to the React Component. ReactDOM.FindDOMNode(ref). If a callback is used, the component will be passed to the function. dangerouslySetInnerHTMLHTML: