V komunite React v poslednej dobe dochádza k výbuchu! Medzi napätie mali sme niekoľko mesiacov, Create React App v2, Hooks, Memo - React, vývojári, noví aj starí, majú plné zuby nových hračiek na hranie. Nakoniec som dostal trochu času na hĺbku do nových rozhraní React.memo (), React.lazy () a API, ako aj do navrhovaného rozhrania Hooks API.

c -> operátor

PureComponent pre funkčné komponenty

Nová technika na zapamätanie! React.memo () je HOC, ktorá zabraňuje vykresľovaniu komponentu pri zmene rekvizít, ak sú rekvizity rovnaké. V zásade beží na mělkom povrchu rekvizít v životnom cykle shouldComponentUpdate (), ale pre funkčné komponenty, ktoré k nemu nemajú prístup (bez prepnutia na triedu).

A ak rekvizity obsahujú zložité objekty, môžeme do komponentu pridať funkciu na kontrolu:

const MyComponent = React.memo(function MyComponent(props) { /* render using props */ }); 

To je veľký nárast výkonu pre systémy komponentov a dizajnu, ktoré sa pri vykresľovaní prvkov používateľského rozhrania nižšej úrovne spoliehajú na funkčné komponenty.

Vyrovnávacia pamäť pre spätné volanie

Implementoval sa aj nový háčik, ktorý pri funkciách používa rovnakú logiku memoizácie. Zabraňuje opakovanému volaniu funkcie, pokiaľ sa nezmenia jej parametre (alebo premenné, ktoré určíte):

function MyComponent(props) { /* render using props */ } function areEqual(prevProps, nextProps) { /* return true if passing nextProps to render would return the same result as passing prevProps to render, otherwise return false */ } export default React.memo(MyComponent, areEqual); 

Napätie sa skončilo

Prvá vec, do ktorej som sa chcel pustiť, bolo Napätie, pretože je skutočne implementované (ak nie je neúplné). Po zhliadnutí Dana neuveriteľné rozhovory o napätí na ReactFest 2018 v marci „Bol som nadšený, že React robí z lenivého načítania takú prioritu, že je to možné začleniť do ich API. Namiesto spoliehania sa na knižnicu ako reakčne zaťažiteľné alebo konfigurácií vo Webpacku, môžem jednoducho:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 

Nielenže budem mať prospech z odkladu načítania balíka mojich komponentov (zrýchlenie načítania aplikácie na začiatku), ale môžem tiež zapojiť ľubovoľný komponent načítania. Robí to ilúzie ako kostrové obrazovky úloha bez námahy.

Môžeš vidieť živý príklad na CodeSandbox :

Háčiky

Spoločnosť React nedávno navrhla nový, funkčnejší spôsob spracovania stavu pomocou hákov, a nie spoliehať sa na metódy životného cyklu komponentu React. Môžeš nájsť celý návrh v dokumentoch React tu .

Ich použitie je jednoduché a ponúka nižší LOC s funkčnými komponentmi v porovnaní s alternatívou triedy.

const OtherComponent = React.lazy(() => import('./OtherComponent')); 
function MyComponent() {  
 return (  
  
   
  
  
  
 );  
 }  
 

Aby ste zvládli akékoľvek vedľajšie efekty v komponente, vhoďte do funkčného komponentu parameter useEffect (), ktorý spustí kód pri každej zmene / opätovnom vykreslení stavu.

Jednou z najlepších častí háčikov je ich funkčná povaha (FP FTW). Háčik a efekt môžete extrahovať do samostatnej funkcie a znova použiť tento háčik vo viacerých komponentoch aplikácie.

Háčiky = Menej zostavený kód

Jednou z najlepších častí pridávania háčikov je možnosť opustiť triedy kvôli stavovej logike v prospech efektívnejších funkcií. Ak ste sa niekedy pozreli na najkompilovanejší kód JS, kvôli spôsobu, akým triedy fungujú (ide o syntaktický cukor oproti prototypom), použitie triedy vo vašej aplikácii váš kód nesmierne nadúva polyfills.

Táto trieda:

function YourComponent({ text }) {  
 const [ theText, updateText] = useState(text)  
 const changeText = ({ target: { value } }) => {  
 updateText(value)  
 }  
 return(  
 changeText}>  
 {theText}  
  
 )  
 }  
 

zostavuje:

class Test extends React {  
 constructor() {  
 super()  
 this.state = {}  
 }  
 render() {  
 return Test  
 }  
 }  
 

}

_createClass (Test, [{
kľúč: render,
hodnota: funkcia render () {
vrátiť React.createElement (
div,
nulový,
Test
);
}
}]);

návratový test;
} (Reagovať);

Naopak, ak používate funkciu (pokiaľ nejde o funkciu šípky ES6), kompiluje sa tak, ako sa zdá - pretože funkcie sú tak široko podporované (keďže sú také primitívne/skoré JS API). Aj keď vezmete do úvahy deštrukciu poľa, kód je stále menší ako trieda , pričom môže používať stav:

use strict; 
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i 
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(Cannot call a class as a function); } }
 
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(this hasn’t been initialised - super() hasn’t been called); } return call && (typeof call === object || typeof call === function) ? call : self; }
 
function _inherits(subClass, superClass) { if (typeof superClass !== function && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.  proto  = superClass; }
 
var Test = function (_React) {  
 _inherits(Test, _React);
 
function Test() {  
 _classCallCheck(this, Test);
 
|_+_|
Skladateľnejšia budúcnosť pre React
Bolo pekné vidieť vylepšenia rozhrania React API za posledný rok. Tím odvádza fantastickú prácu pri udržiavaní staršieho rozhrania API a pri rozbíjaní aplikácií (Facebook stále používa React.createElement) a pridanie nových funkcií rieši kľúčové problémy, s ktorými sa vývojári stretávajú. Nemôžem vám povedať, koľkokrát som musel vziať funkčný komponent a previesť ho na triedu iba pre jeden stavový boolean, kde teraz budem môcť jednoducho spustiť háčik v hornej časti funkcie ( a zapamätajte si ho, aby ste získali rovnaký výkon ako PureComponent!).
  
Autor: Ryosuke  
  
 
#reactjs #javascript
  
dev.to
Reagujte háčiky, napätie a poznámky
V komunite React v poslednej dobe dochádza k výbuchu! Medzi napätie mali sme niekoľko mesiacov, Create React App v2, Hooks, Memo - React, vývojári, noví aj starí, majú plné zuby nových hračiek na hranie. Konečne som dostal trochu času na prekopanie nových React.memo (), React.lazy () aAPI, ako aj navrhované API Hooks.