daGrevis Posted May 19, 2015 Report Share Posted May 19, 2015 > Kaut kā nepielec, baigā atšķīrība no prasta JQuery. Iesākumam, tu nerunā ar DOM. Quote Link to comment Share on other sites More sharing options...
briedis Posted May 19, 2015 Report Share Posted May 19, 2015 Otrkārt, nav jāčakarējas ar eventu nodošanu/citu komponenšu refrešošanu? Quote Link to comment Share on other sites More sharing options...
codez Posted May 19, 2015 Report Share Posted May 19, 2015 Vienkārša situācija, piemēram, ar todo sarakstu. Ar jquery tev būs jāraksta sekojošas funkcijas, kas maina izskatu: - renderēt visu listu - izdzēst elementu - pievienot elementu - atzīmēt kā izpildītu - utt. Ar react tu raksti, tikai: - renderēt visu listu Quote Link to comment Share on other sites More sharing options...
Wuu Posted May 20, 2015 Author Report Share Posted May 20, 2015 (edited) Main klasē padod "menu click callback" uz Menu komponentei (caur props) tad, kad Menu komponentē notiek kliks, tu izsauksi padoto "menu click callback". Līdzi padod menu identifikatoru Tālāk Main klase savā state uzstādīts activeMenuId (uzstādot state notiks rerender) activeMenuId tiek caur props padots Satura komponentei Tad, kad notiks rerender Satura komponente ielādēs saturu vadoties pēc padotā activeMenuId var Main = React.createClass({ getInitialState: function() { return { activMenuId: 1 } }, handleMenuClick: function(menuId) { this.setState({activMenuId: menuId}) }, render: function() { return ( <Menu onMenuClick={this.handleMenuClick} /> <Saturs menuId={this.state.activMenuId} ); } }); Šis variants nedarbojas , ja izlaiž React classi Menu caur "map". A huļi? EDIT {this.state.joblist.map(function(data) { return (<Panel key={data.id} id={data.id} data={data} handleProgressUp={this.handleProgressUp} />); })} Nomainīju uz {this.state.joblist.map(function(data) { return (<Panel key={data.id} id={data.id} data={data} handleProgressUp={this.handleProgressUp} />); }, this)} EDIT 2 ko nozīme "()=>" Piem: onClick={()=>this.props.handleProgressUp(this.props.id)} Cik saprotu funkcija? Edited May 20, 2015 by Wuu Quote Link to comment Share on other sites More sharing options...
codez Posted May 20, 2015 Report Share Posted May 20, 2015 ko nozīme "()=>" Piem: onClick={()=>this.props.handleProgressUp(this.props.id)} Cik saprotu funkcija? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions Tā ir anonīma funkcija ar piebindotu this. ES6 standarts. react jsx transformeris to pārveido ES3 atbilstošā funkcijā, lai strādātu uz pārlūkiem, kuri vēl neatbalsta šo ES6 standarta daļu. Quote Link to comment Share on other sites More sharing options...
Wuu Posted May 20, 2015 Author Report Share Posted May 20, 2015 (edited) Es tā arī nesapratu, kā ievietot funkciju ar piebindotu this, varētu piemēru? Nu, principa pēc :D (Lietošu ikdienā ()=>) //čota takoje? onClick={function() { this.props.balabala}} Edited May 20, 2015 by Wuu Quote Link to comment Share on other sites More sharing options...
codez Posted May 20, 2015 Report Share Posted May 20, 2015 (edited) bind(this) nozīmē, ka funkcija tiks izsaukta ar contextu this. Kā var redzēt piemērā, ja netiek piebindots this (3 un 4 gadījumā), tad anonīmās funkcijas konteksts ir window un nav pieejama App react klase un nevar izsaukt funkciju add. Ar arrow funkciju (5 un 6) pieraksts ir krietni īsāks http://jsfiddle.net/d9crpzqy/10/ var App = React.createClass({ getInitialState(){ return { x:5 } }, add(d){ this.setState({x:this.state.x+d}); }, render(){ return <div> <div>X = {this.state.x}</div> <button onClick={function(){this.add(1)}.bind(this)}>Add 1</button> <button onClick={function(){this.add(2)}.bind(this)}>Add 2</button> <button onClick={function(){this.add(3)}}>Add 3</button> <button onClick={function(){this.add(4)}}>Add 4</button> <button onClick={()=>this.add(5)}>Add 5</button> <button onClick={()=>this.add(6)}>Add 6</button> </div> } }); React.render(<App />, document.getElementById('app')); Edited May 20, 2015 by codez Quote Link to comment Share on other sites More sharing options...
Wuu Posted May 20, 2015 Author Report Share Posted May 20, 2015 Vienīga problēma, ka man Chromē nestrādā, un ne uz vienas mobilās ierīces ar. Tik FireFoxē. Paldies par info! Quote Link to comment Share on other sites More sharing options...
codez Posted May 20, 2015 Report Share Posted May 20, 2015 Tāpēc, ka jsx ir jātrasformē un to transformējot tiek transformētas arī ES6 arrow funkcijas: https://facebook.github.io/react/docs/tooling-integration.html#jsx Arrow funkciju piemērs jsfiddlē taču tev iet? Quote Link to comment Share on other sites More sharing options...
Kasspars Posted May 20, 2015 Report Share Posted May 20, 2015 Wuu, tev ir jāiemācās dažas basic lietas par JavaScript. Sāc ar scope http://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript Quote Link to comment Share on other sites More sharing options...
Wuu Posted May 20, 2015 Author Report Share Posted May 20, 2015 Tāpēc, ka jsx ir jātrasformē un to transformējot tiek transformētas arī ES6 arrow funkcijas: https://facebook.github.io/react/docs/tooling-integration.html#jsx Arrow funkciju piemērs jsfiddlē taču tev iet? Iespējams pie vainas ir React, cik skatos jsfidle ir ar addoniem. Man bez. Quote Link to comment Share on other sites More sharing options...
codez Posted May 20, 2015 Report Share Posted May 20, 2015 Nē, fiidlē ir JSXTransformer.js, kurš pārveido javascript kodu pirms palaišanas. Bet, piemēram, pie produktu izstrādes es JSXTransformeri laižu servera pusē un man uz klientu uzreiz nāk ES3 saderīgs javascripts. Quote Link to comment Share on other sites More sharing options...
Wuu Posted May 20, 2015 Author Report Share Posted May 20, 2015 Man arī ir JSXTransformer.js, nesapratu. Quote Link to comment Share on other sites More sharing options...
Wuu Posted May 28, 2015 Author Report Share Posted May 28, 2015 var CreatTable = React.createClass({ getInitialState: function () { return({table: this.props.table, TEST: null}); //state pašā klasē }, handelThSort: function(row) { //click this.setState({TEST: false}); console.log(this.state.TEST); //state NENOMAINĀS }..... A hulji nenomainās? Quote Link to comment Share on other sites More sharing options...
codez Posted May 28, 2015 Report Share Posted May 28, 2015 Nav paredzēts, ka nomainās. setState nenomaina state, bet tikai pasaka, ka vajag nomainīt. Un, ja nemaldos, reāla nomaiņa notiek saskaņoti ar renderēšanas kadriem (ne biežāk kā 60 reizes sekundē), kas ļauj veidot sarežģītas komponentes, kurās setState var tikt izsaukt ļoti daudz reižu, bet reālā komponentes stāvokļa maiņa tiek veikta tikai pa renderēšanas kadriem. Respektīvi tā ir optimizācija. Tu vari tajā handleXXXXX funkcijā uztaisīt ciklu ar 10'000 setState izsaukumiem, bet reāli state tiks nomainīt tikai vienu reizi. Tā ir optimizācija. http://facebook.github.io/react/docs/component-api.html#setstate setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.