React Hooks, suspens i memòria

Bloc

React Hooks, suspens i memòria

Darrerament, les coses exploten a la comunitat React! Entre suspens teníem durant uns mesos, Create React App v2, Hooks, Memo: els desenvolupadors nous i antics React tenen els plats plens amb joguines noves per jugar. Finalment vaig tenir una mica de temps per aprofundir en el nou React.memo (), React.lazy () i les API, així com en la proposta de Hooks API.



millor idea python per a la ciència de dades

PureComponent per a components funcionals

Una nova tècnica per fer memòries! React.memo () és un HOC que impedeix que un component es mostri en els accessoris si els accessoris són els mateixos. Bàsicament, s’executa una superfície igual als objectes del cicle de vida shouldComponentUpdate (), però per a components funcionals que no hi tenen accés (sense canviar a una classe).

var _this = _possibleConstructorReturn(this, (Test.__proto__ || Object.getPrototypeOf(Test)).call(this)); _this.state = {}; return _this;

I si els accessoris contenen objectes complexos, podem afegir una funció dins del component per comprovar:



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

Es tracta d’un gran guany de rendiment per als sistemes de components i de disseny que es basen en components funcionals per representar elements d’interfície d’usuari de nivell inferior.

Una memòria cau de devolució de trucada

També hi ha implementat un nou ganxo que utilitza la mateixa lògica de memoització de les funcions. Evita que la funció es torni a cridar tret que canviïn els paràmetres (o variables que especifiqueu):



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); 

El suspens s’ha acabat

El primer que volia aprofundir era el suspens, ja que realment està implementat (si no incomplet). Després de veure el de Dan increïble xerrada sobre suspens a ReactFest 2018 al març , Em feia il·lusió que React feia que la càrrega mandrosa fos una prioritat suficient per incorporar-la a la seva API. En lloc de confiar en una biblioteca com carregable de reacció o configuracions a Webpack, simplement puc:

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

No només tinc l’avantatge d’ajornar la càrrega del paquet de components (fent que l’aplicació es carregui inicialment més ràpidament), sinó que també puc connectar qualsevol component de càrrega. Fa il·lusions com pantalles d'esquelet una tasca sense esforç.

Pots veure un exemple en viu a CodeSandbox :

Ganxos

Recentment React ha proposat una nova manera més funcional de manejar l’estat mitjançant ganxos, en lloc de confiar en els mètodes del cicle de vida d’un component React. Pots trobar tota la proposta dels documents React aquí .

Utilitzar-los és senzill i ofereix un LOC inferior amb components funcionals en comparació amb l’alternativa de classe.

const OtherComponent = React.lazy(() => import('./OtherComponent')); 

function MyComponent() {
return (





);
}

Per gestionar qualsevol efecte secundari del component, llanceu un useEffect () dins del component funcional per executar codi a cada canvi d'estat / renderització.

Una de les millors parts dels ganxos és la seva naturalesa funcional (FP FTW). Podeu extreure el ganxo i l'efecte en una funció independent i tornar-lo a utilitzar en diversos components de l'aplicació.

Ganxos = Codi menys compilat

Una de les millors parts de l’addició de ganxos és la possibilitat d’abandonar classes per obtenir una lògica estatal en favor de funcions més eficients. Si alguna vegada heu analitzat la majoria dels codis JS compilats, a causa de la forma en què funcionen les classes (ja que són sucre sintàctic sobre prototips), l’ús d’una classe a la vostra aplicació inflat enormement el vostre codi amb polillenys.

Aquesta classe:

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

)
}

compila a:

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

}

_createClass (prova, [{
clau: render,
valor: funció render () {
retorna React.createElement (
div,
nul,
Prova
);
}
}]);

prova de retorn;
} (Reacciona);

En canvi, si utilitzeu una funció (tret que sigui una funció de fletxa ES6), es compila tal com apareix, ja que les funcions són tan àmpliament compatibles (ja que són tan primitives / primeres JS API). Fins i tot quan es té en compte la desestructuració de matrius, el codi encara és inferior a la classe , mentre es pot utilitzar l'estat:

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);

|_+_|

Un futur més composable per a React

Ha estat agradable veure les millores de l’API React durant l’últim any. L’equip fa un treball fantàstic mantenint l’API heretada i no trencant aplicacions (Facebook continua utilitzant React.createElement), i l’addició de noves funcions que totes les solucions dels problemes clau tenen als desenvolupadors. No puc dir-vos quantes vegades he hagut de prendre un component funcional i convertir-lo en una classe només per a un booleà amb estat, on ara només podré deixar anar un ganxo a la part superior de la funció ( i recordeu-lo per obtenir el mateix perfeccionament que PureComponent!).


Per: Ryosuke


#reactjs #javascript

dev.to

React Hooks, suspens i nota

Darrerament, les coses exploten a la comunitat React! Entre suspens teníem durant uns mesos, Create React App v2, Hooks, Memo: els desenvolupadors nous i antics React tenen els plats plens amb joguines noves per jugar. Finalment vaig tenir una mica de temps per aprofundir en el nou React.memo (), React.lazy () iAPI, així com l'API Hooks proposada.