Hvad jeg ville ønske jeg vidste, da jeg begyndte at arbejde med React.js

Efter sin første frigivelse den 29. maj 2013 har React.js overtaget internettet. Det er ikke en hemmelighed, at jeg selv og mange andre udviklere skylder deres succes til denne fantastiske ramme.

Med Medium så fuld af React.js-tutorials, ville jeg ønske, at en af ​​dem fortalte mig disse tip, da jeg startede.

Behøver ikke .bind (dette), når du bruger pilefunktionen

Normalt har du noget som dette, når du har en kontrolleret komponent:

class Foo extends React.Component{ constructor( props ){ super( props ); this.handleClick = this.handleClick.bind(this); }
 handleClick(event){ // your event handling logic }
 render(){ return (  Click Me  ); }}

Du skriver .bind(this)til hver metode, der findes, fordi de fleste tutorials fortæller dig at gøre det. Hvis du har flere kontrollerede komponenter, ender du med en fed stak koder i din constructor(){}.

I stedet kan du:

class Foo extends React.Component{
 handleClick = (event) =>; { // your event handling logic }
 render(){ return (  Click Me  ); }}

Hvordan?

ES6s pilefunktion bruger Lexical Scoping, som giver metoden adgang til det sted, thishvor den udløses.

Når servicearbejdere arbejder imod dig

Servicearbejdere er gode til en progressiv webapp, der giver mulighed for offline adgang og optimeres til brugere med dårlige internetforbindelser.

Men når du ikke er opmærksom på, at servicearbejderen cachelagrer dine statiske filer, distribuerer du dine hot-fix gentagne gange.

Kun for at finde dit websted opdateres ikke. ?

Gå ikke i panik, sørg for i din src/index.js:

// Make sure it's set to unregisterserviceWorker.unregister();

Fra og med version 16.8 skal denne linje være serverWorker.unregister()som standard.

Men hvis de beslutter at ændre igen, ved du, hvor du skal lede.

99% af tiden behøver du ikke at skubbe ud

Create React App tilbyder en mulighed for yarn ejectdit projekt til at tilpasse din byggeproces.

Jeg kan huske, at jeg forsøgte at tilpasse byggeprocessen, så SVG-billeder automatisk blev indlejret i vores kode. Jeg brugte timer på bare at prøve at forstå byggeprocessen. Vi ender med at have en importfil, der injicerer SVG-tags, og vi øgede websteds indlæsningshastighed med 0,0001 millisekunder.

At skubbe dit React-projekt ud er som at sprænge motorhjelmen på din kørende bil og skifte motor i farten for at køre 1% hurtigere.

Selvfølgelig, hvis du allerede er en Webpack-mester, er det umagen værd at tilpasse byggeprocessen for at skræddersy projektets behov.

Når du prøver at levere til tiden, skal du fokusere på, hvor den bevæger nålen fremad.

ESlint Auto Fix On Save sparer så meget tid

Du har muligvis kopieret en eller anden kode fra et sted, der er ude af whack-formatering. Fordi du ikke kan tåle, hvor grimt det ser ud, bruger du tid manuelt på at tilføje mellemrum.

Med ESLint og Visual Studio Code Plugin kan det rette det for dig ved gemning.

Hvordan?

  1. I din package.jsontilføj nogle dev-afhængigheder og gør npm ieller yarn:
"devDependencies": {
 "eslint-config-airbnb": "^17.1.0",
 "eslint-config-prettier": "^3.1.0",
 "eslint-plugin-import": "^2.14.0",
 "eslint-plugin-jsx-a11y": "^6.1.1",
 "eslint-plugin-prettier": "^3.0.0",
 "eslint-plugin-react": "^7.11.0"
}

2. Installer ESLint-udvidelsen

3. Aktivér Auto Fix On Save

Du har ikke brug for Redux, stylede komponenter osv ...

Hvert værktøj har sit formål. Når det er sagt, er det godt at vide om de forskellige værktøjer.

Hvis alt hvad du har er en hammer, ser alt ud som et søm - Abraham Maslow

Du skal tænke på opsætningstiden for nogle af de biblioteker, du bruger, og sammenligne den med:

  • Hvad er det problem, jeg prøver at løse?
  • Vil dette projekt leve længe nok til at drage fordel af dette bibliotek?
  • Tilbyder React allerede noget lige ud af kassen?

Med Kontekst og kroge tilgængelige for React nu, har du stadig brug for Redux?

Jeg kan varmt anbefale Redux Offline til når dine brugere er i et dårligt internetforbindelsesmiljø.

Genbrug begivenhedshåndterer

Hvis du ikke har lyst til at skrive det samme igen og igen, kan genbrug af en begivenhedshåndterer være en mulighed:

class App extends Component {
 constructor(props) { super(props); this.state = { foo: "", bar: "", }; }
 // Reusable for all inputs onChange = e => { const { target: { value, name }, } = e; // name will be the state name this.setState({ [name]: value });
 }; render() { return ( ); }}

setState er asynkron

Den naive mig ville skrive noget som:

 constructor(props) { super(props); this.state = { isFiltered: false }; }
 toggleFilter = () => { this.setState({ isFiltered: !this.state.isFiltered }); this.filterData(); }; filterData = () => { // this.state.isFiltered should be true, but it's not if (this.state.isFiltered) { // Do some filtering } };

Mulighed 1: At sende staten ned

toggleFilter = () => { const currentFilterState = !this.state.isFiltered; this.setState({ isFiltered: currentFilterState }); this.filterData(currentFilterState);};
filterData = (currentFilterState) => { if (currentFilterState) { // Do some filtering }};

Mulighed 2: Den sekundære funktion til tilbagekaldelsen af ​​setState

toggleFilter = () => { this.setState((prevState) => ({ isFiltered: !prevState.isFiltered }), () => { this.filterData(); });};
filterData = () => { if (this.state.isFiltered) { // Do some filtering }};

Konklusion

Disse tip sparede mig meget tid, og jeg er sikker på, at der er flere. Du er velkommen til at dele dem i kommentarfeltet.

Hvis du ønsker at integrere dit websted med WeChat og nå 1+ milliarder brugere i Kina, kan du tilmelde dig en gratis ordliste for almindeligt anvendte WeChat-termer.