Jump to content
php.lv forumi

Angularjs vai Backbonejs vai ko citu?


Wuu

Recommended Posts

  • Replies 51
  • Created
  • Last Reply

Top Posters In This Topic

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

Link to comment
Share on other sites

 

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 by Wuu
Link to comment
Share on other sites

 

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.

Link to comment
Share on other sites

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 by Wuu
Link to comment
Share on other sites

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 by codez
Link to comment
Share on other sites

    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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...