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:
- 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.
- Kerüli a 2. és a 3. megközelítés teljesítményproblémáit.
- Kerüli az ismétlést a 4. megközelítésben.
- 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 18Van 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.