Reakciókötési minták: 5 megközelítés ennek a kezeléséhez

A JavaScript ez a kulcsszóval kapcsolatos viselkedése korok óta megzavarja a fejlesztőket.

Legalább ötféle módon lehet kezelni ezt a kontextust a React-ben. Vizsgáljuk meg az egyes megközelítések előnyeit.

1. Használja a React.createClass alkalmazást

Ha React.createClass reagálnak autobinds összes funkció ezt . Tehát ez a kulcsszó automatikusan kapcsolódik az összetevő példányához:

// This magically works with React.createClass// because `this` is bound for you.onChange={this.handleChange}

Az ES6 osztályok megjelenésével azonban az osztályok létrehozásának ez a nem szabványos megközelítése nem a React jövője. Valójában a createClass valószínűleg egy későbbi kiadásban kerül kibontásra a React magból.

2. Kötés a Renderbe

E megközelítések többi része feltételezi, hogy a React összetevőket az ES6 osztályokon keresztül deklarálja. Ha ES6 osztályt használ, akkor a React nem használ tovább autót. Ennek egyik módja a kötés meghívása a renderben:

onChange={this.handleChange.bind(this)}

Ez a megközelítés szűkszavú és egyértelmű, azonban vannak teljesítményre vonatkozó következményei, mivel a funkció minden renderelésre át van osztva. Ez nagy ügynek tűnik, de ennek a megközelítésnek a teljesítményre gyakorolt ​​hatása valószínűleg nem lesz észrevehető a legtöbb alkalmazásban. Tehát az eredmény kizárása a kezdetektől korai optimalizálás. Ennek ellenére itt van egy példa, ahol ennek a megközelítésnek a teljesítményre gyakorolt ​​hatása számított.

Alsó sor: ha teljesítményproblémák merülnek fel, kerülje a lekötés vagy a nyíl függvények használatát a renderelésben.

3. Használja a nyíl függvényt a Renderben

Ez a megközelítés hasonló a # 2-hez. Akkor ne változzék meg a ezt összefüggésben segítségével egy nyíl funkció teszi:

onChange={e => this.handleChange(e)}

Ennek a megközelítésnek ugyanolyan potenciális hatása van a teljesítményre, mint a 2. sz.

Az alábbi alternatív megközelítéseket érdemes megfontolni, mert kiváló teljesítményt kínálnak, kevés extra költség mellett.

4. Kötés a konstruktorban

Az egyik módja annak, hogy elkerüljük a lekötésben való kötést, a kötés a konstruktorban (a másik megközelítést az alábbiakban az # 5 tárgyalja).

constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); }

Ezt a megközelítést javasolja a React dokumentumokban a „jobb teljesítmény az alkalmazásban” érdekében. Ezt a megközelítést alkalmazom a Pluralsight „Building Applications with React and Redux in ES6” című kiadásában is.

A legtöbb alkalmazásban azonban a 2. és a 3. megközelítés teljesítményvonzata nem lesz észrevehető, így a 2. és a 3. megközelítés olvashatósági és karbantartási előnyei sok alkalmazásban felülmúlják a teljesítményre vonatkozó aggályokat.

De ha hajlandó használni a 2. szakasz funkcióit, akkor az alábbi utolsó lehetőség valószínűleg a legjobb fogadás.

5. Használja a nyíl függvényt az osztálytulajdonságban

Ez a technika a javasolt osztálytulajdonságra támaszkodik. A megközelítés használatához engedélyeznie kell a transzformációs osztály tulajdonságait, vagy engedélyeznie kell a 2. stádiumot a Bábelben.

handleChange = () => { // call this function from render // and this.whatever in here works fine. };

Ennek a megközelítésnek számos előnye van:

  1. A nyílfüggvények elfogadják a befogadó hatókör ezen kötését (más szóval, nem változtatják meg ennek jelentését ), így a dolgok egyszerűen működnek.
  2. Kerüli a 2. és a 3. megközelítés teljesítményproblémáit.
  3. Kerüli az ismétlést a 4. megközelítésben.
  4. Könnyű átdolgozni az ES5 createClass stílust ebbe a stílusba azáltal, hogy a releváns függvényeket nyílfüggvényekké alakítja. Valójában létezik egy teljesen automatizált módszer ennek kezelésére egy kodemód használatával.

Összegzés

Ez a folyamatábra, amely összefoglalja a döntést.

Íme az öt megközelítés teljes példája:

// Approach 1: Use React.createClass var HelloWorld = React.createClass({ getInitialState() { return { message: 'Hi' }; }, logMessage() { // this magically works because React.createClass autobinds. console.log(this.state.message); }, render() { return (  ); } }); // Approach 2: Bind in Render class HelloWorld extends React.Component { constructor(props) { super(props); this.state = { message: 'Hi' }; } logMessage() { // This works because of the bind in render below. console.log(this.state.message); } render() { return (  ); } } // Approach 3: Use Arrow Function in Render class HelloWorld extends React.Component { constructor(props) { super(props); this.state = { message: 'Hi' }; } logMessage() { // This works because of the arrow function in render below. console.log(this.state.message); } render() { return (  this.logMessage()} /> ); } } // Approach 4: Bind in Constructor class HelloWorld extends React.Component { constructor(props) { super(props); this.state = { message: 'Hi' }; this.logMessage = this.logMessage.bind(this); } logMessage() { // This works because of the bind in the constructor above. console.log(this.state.message); } render() { return (  ); } } // Approach 5: Arrow Function in Class Property class HelloWorld extends React.Component { // Note that state is a property, // so no constructor is needed in this case. state = { message: 'Hi' }; logMessage = () => { // This works because arrow funcs adopt the this binding of the enclosing scope. console.log(this.state.message); }; render() { return (  ); } }

Tehát mit szeretnek az emberek? Itt van a közvélemény-kutatás:

Hogyan kezeli ma a #reactjs kötését?

Példák: //t.co/z7OKxe39VA

- Cory House (@housecor) 2016. augusztus 18

Van más módja ennek kezelésére? Kérjük, csengjen be a megjegyzésekkel.

Hatalmas köszönet @dan_abramov, @kentcdodds és @dmosher értékes hozzájárulásukért és felülvizsgálatukért!

Cory House írta: „Building Applications with React and Redux in ES6”, „Building Applications with React and Flux”, „Clean Code: Writing Code for Humans” és számos más, a Pluralsight tanfolyamot. Szoftverépítész a VinSolutions-nál, a Microsoft MVP-nél, és nemzetközi szinten képzi a szoftverfejlesztőket olyan szoftveres gyakorlatokra, mint a front-end fejlesztés és a tiszta kódolás.