One
Two
1 <!DOCTYPE HTML>2 <HTMLLang= "ZH-CN">3 4 <Head>5 <MetaCharSet= "UTF-8">6 <title>Document</title>7 </Head>8 9 <Body>Ten <Scriptsrc= "./jquery-2.1.4.min.js"></Script> One <Scriptsrc= "./react-0.13.2/build/react.js"></Script> A <Scriptsrc= "./react-0.13.2/build/jsxtransformer.js"></Script> - <Scripttype= "TEXT/JSX"> - $(function(){ the varstyle= { - Color:"Red", - border:"1px #000 Solid", - }; + varHelloWorld=React.createclass ({ - Componentwillreceiveprops:function(newprops) { + Console.log ("Componentwillreceiveprops 1"); A Console.log (newprops); at }, - shouldcomponentupdate:function () { - Console.log ("shouldcomponentupdate 2"); - return true; - }, - componentwillupdate:function () { in Console.log ("componentwillupdate 3"); - }, to Render:function () { + Console.log ("Render 4"); - return <P>Hello, { This. Props.name? This. Props.name:" World"}</p>; the }, * componentdidupdate:function() { $ $ (React.finddomnode ( This). Append ("surprise!");Panax Notoginseng }, - }); the varHellouniverse=React.createclass ({ + getinitialstate:function(){ A return{name:"'}; the }, + HandleChange:function(event) { - This. SetState ({name:event.target.value}); $ }, $ Render:function(){ - return <Div> - <HelloWorld name={ This. State.name}></helloworld> the <BR/> - <input type="text"OnChange={ This. HandleChange}/>Wuyi </div> the }, - }); Wu React.render (<div Style={style}><Hellouniverse></hellouniverse></Div>, document.body); - }); About $ </Script> - </Body> - - </HTML>
Results:
React component life cycle-functions that perform the run phase correctly
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
