Amit bárcsak tudnék, amikor elkezdtem dolgozni a React.js-sel

Az eredeti megjelenés után, 2013. május 29-én a React.js átvette az internetet. Nem titok, hogy én és sok más fejlesztő ennek a csodálatos keretrendszernek köszönheti sikereit.

A Medium annyira tele van React.js oktatóanyagokkal, bárcsak egyikük elmondta nekem ezeket a tippeket, amikor elkezdtem.

A nyíl funkció használatakor nincs szükség .bind (erre)

Általában valami ilyesmi lesz, ha van vezérelt összetevője:

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

.bind(this)Minden létező módszerhez írsz , mert a legtöbb oktatóanyag erre utasítja. Ha több ellenőrzött összetevője van, akkor egy kövér kódköteg lesz a végén constructor(){}.

Ehelyett:

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

Hogyan?

Az ES6 nyílfüggvénye a Lexical Scoping funkciót használja, amely lehetővé teszi a módszer elérését a thiskiváltott helyhez.

Amikor a szolgálati dolgozók ellened dolgoznak

A kiszolgáló munkatársak kiválóan alkalmasak egy progresszív webalkalmazáshoz, amely lehetővé teszi az offline hozzáférést és optimalizálja a gyenge internetkapcsolattal rendelkező felhasználók számára.

De ha még nem tudja, hogy a kiszolgáló a statikus fájlokat tárolja, akkor a gyorsjavításokat ismételten telepíti.

Csak azért nem frissül, hogy megtalálja a webhelyét. ?

Ne essen pánikba, ügyeljen a következőkre src/index.js:

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

A 16.8-as verziótól kezdve ennek a sornak serverWorker.unregister()alapértelmezettnek kell lennie .

De ha ismét úgy döntenek, hogy változtatnak, akkor tudja, hová kell keresnie.

99% -ban nem kell kiadnia

A Create React App lehetőséget kínál yarn ejecta projektre, hogy testre szabhassa a gyártási folyamatot.

Emlékszem, hogy megpróbáltam testre szabni az összeállítási folyamatot, hogy az SVG-képek automatikusan bekerüljenek a kódunkba. Órákon át próbáltam megérteni az összeállítási folyamatot. Végül egy import fájl áll rendelkezésünkre, amely SVG címkéket injektál, és 0,0001 milliszekundummal megnöveltük a webhely betöltési sebességét.

A React projekt elvetése olyan, mintha felpattanna a futó autó motorházteteje, és menet közben cserélné a motort, hogy 1% -kal gyorsabban működjön.

Természetesen, ha Ön már Webpack mester, akkor érdemes az építési folyamatot testre szabni a projekt igényeinek megfelelően.

Amikor időben akarsz szállítani, koncentrálj arra, hogy hol mozgatja a tűt előre.

Az ESlint Auto Fix On Save mentése sok időt takarít meg

Lehet, hogy másolt valahonnan valamilyen kódot, amelynek formázása nem megfelelő. Mivel nem tudja elviselni, hogy milyen csúnyán néz ki, időt tölt manuálisan szóközök hozzáadásával.

Az ESLint és a Visual Studio Code Plugin segítségével mentéskor kijavíthatja.

Hogyan?

  1. Az Ön package.json, adjunk hozzá egy kevés dev függőségeket, és nem npm ivagy 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. Telepítse az ESLint kiterjesztést

3. Engedélyezze az Automatikus javítás mentéskor lehetőséget

Nincs szüksége Redux-ra, stílusos alkatrészekre stb.

Minden eszköznek megvan a maga célja. Ennek ellenére jó tudni a különböző eszközökről.

Ha csak egy kalapácsod van, akkor minden körömnek tűnik - Abraham Maslow

Gondolkodnia kell néhány használt könyvtár beállítási idején, és össze kell hasonlítania:

  • Mi a probléma, amit megpróbálok megoldani?
  • Elég sokáig fog élni a projekt ahhoz, hogy profitálhasson ebből a könyvtárból?
  • A React kínál valamit már közvetlenül a dobozból?

Mivel a React számára elérhető kontextus és kampók most is szükségesek, még mindig szükséged van Redux-ra?

I do highly recommend Redux Offline for when your users are in a poor internet connection environment.

Reuse event handler

If you don’t feel like typing the same thing over and over again, reusing an event handler could be an option:

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 is asynchronous

The naïve me would write something like:

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

Option 1: Passing the state down

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

Option 2: The secondary function to the callback of setState

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

Conclusion

These tips saved me a lot of time, and I am sure there are more. Please feel free to share them in the comments section.

If you are looking to integrate your website with WeChat and reach 1+ billion users in China, sign up for a free glossary for commonly used WeChat terms.