Nasza strona używa cookies. Dowiedz się więcej o celu ich używania i zmianie ustawień w przeglądarce. Korzystając ze strony, wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki. Rozumiem

Co chciałbym wiedzieć przed rozpoczęciem pracy z React.js.

David Yu Software Developer
Poznaj 7 pomocnych wskazówek, które powinien znać każdy deweloper React.
Co chciałbym wiedzieć przed rozpoczęciem pracy z React.js.

Od czasu pierwszego wydania 29 maja 2013 roku, React.js przejął Internet. Nie jest tajemnicą, że wielu programistów, w tym ja sam, zawdzięcza swój sukces temu niesamowitemu narzędziu.

Z siecią tak pełną tutoriali o React.js, żałuję, że ani jeden z nich nie przekazał mi tych wskazówek, kiedy sam zaczynałem.


Nie potrzebujesz .bind(this), gdy używasz funkcji strzałkowej

Zazwyczaj posiadając kontrolowany komponent, będziesz miał coś takiego:

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


Piszesz .bind(this) do każdej istniejącej metody, ponieważ większość samouczków mówi Ci, żebyś tak robił. Jeśli masz kilka kontrolowanych komponentów, skończysz ze stosem kodu w Twoim constructor(){}.

Zamiast tego, możesz:

class Foo extends React.Component{
  handleClick = (event) => {
    // your event handling logic
  }
  render(){
    return (
      <button type="button" 
      onClick={this.handleClick}>
        Click Me
      </button>
    );
  }
}


Jak?

Funkcja strzałkowa ES6 wykorzystuje funkcję Lexical Scoping, która umożliwia dostęp do this, w którym jest wywołana.


Kiedy Service Workers pracują przeciwko Tobie

Service Workers są świetni przy progresywnej aplikacji internetowej, która pozwala na dostęp offline i optymalizuje się dla użytkowników o słabych połączeniach internetowych.

Ale kiedy nie jesteś świadomy, że Service Worker buforował Twoje statyczne pliki, wdrażasz swoje poprawki wielokrotnie.

Tylko po to, by odkryć, że Twoja strona się nie aktualizuje. 😰

Nie panikuj, upewnij się że masz w swoim src/index.js:

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


Od wersji 16.8 linia ta powinna domyślnie wyglądać tak serverWorker.unregister().

Teraz wiesz gdzie zajrzeć, jeśli zmienią to ponownie w następnej wersji.


W 99% przypadków, nie potrzebujesz ejectowania

Aplikacja Create React App oferuje opcję yarn eject w celu dostosowania procesu budowy aplikacji.

Pamiętam, że próbowałem dostosować proces budowania tak, aby obrazy SVG były automatycznie wpisane do kodu. Spędziłem wiele godzin próbując zrozumieć proces budowy. Ostatecznie mamy plik importu, który dodaje znaczniki SVG i tym samym zwiększyliśmy prędkość ładowania strony o 0,0001 milisekundy.

Eject projektu React jest jak podnoszenie maski uruchomionego samochodu i zmiana silnika na miejscu na taki, który jest szybszy o 1%.

Oczywiście, jeśli jesteś już mistrzem Webpacka, warto dostosować proces budowy do potrzeb projektu.

Kiedy próbujesz dostarczyć coś na czas, skoncentruj swoje wysiłki na tym, co faktycznie da progres.


ESlint i Auto Fix on Save oszczędzają bardzo dużo czasu

Wszyscy skopiowaliśmy jakiś kod, który miał dziwaczne formatowanie, a z powodu tego, jak brzydko wyglądał, spędziliśmy czas na ręcznym dodawaniu spacji.

Z wtyczką ESLint i wtyczką Visual Studio Code, będzie to robione przy zapisie.

Jak?

1. W Twoim package.json, dodaj kilka zależności dev i wykonaj npm i lub 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. Zainstaluj rozszerzenie ESLint:

3. Włącz funkcję Auto Fix On Save:


Wcale nie potrzebujesz Redux, Styled-components, itp...

Każde narzędzie ma swoje przeznaczenie. Dobrze jest je znać, ale nie zawsze jest to potrzebne.

Jeśli posiadasz jedynie młotek, wszystko wygląda jak gwóźdź. - Abraham Maslow.


Musisz zastanowić się nad czasem konfiguracji niektórych bibliotek, których używasz i zadać sobie pytanie:

  • Jaki problem próbuję rozwiązać?
  • Czy ten projekt będzie żył wystarczająco długo, aby skorzystać z tej biblioteki?
  • Czy przypadkiem React nie oferuje czegoś takiego domyślnie?


Mając Context i Hooks dla Reacta, czy nadal potrzebujesz Redux?

Gorąco polecam Redux Offline, jeśli Twoi użytkownicy znajdują się w złym środowisku internetowym.


Ponowne wykorzystanie procedury do obsługi zdarzeń

Jeśli nie masz ochoty wpisywać w kółko tego samego, ponowne użycie handlera zdarzeń może być wyjściem:

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 (
   <div>
    <input name="foo" onChange={this.onChange} />
    <input name="bar" onChange={this.onChange} />   
   </div>
  );
 }
}


setState jest asynchroniczne

Naiwny ja napisałby coś w tym stylu:

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
  }
 };
 
 render() {
  return (
   <div>
    <input name="foo" onChange={this.onChange} />
    <input name="bar" onChange={this.onChange} />   
   </div>
  );
 }
}


Wariant 1: Przekazywanie stanu w dół

toggleFilter = () => {
 const currentFilterState = !this.state.isFiltered;
 this.setState({
  isFiltered: currentFilterState
 });
 this.filterData(currentFilterState);
};
filterData = (currentFilterState) => {
 if (currentFilterState) {
  // Do some filtering
 }
};
 
 render() {
  return (
   <div>
    <input name="foo" onChange={this.onChange} />
    <input name="bar" onChange={this.onChange} />   
   </div>
  );
 }
}


Wariant 2: Ustawianie funkcji dodatkowej na wywołanie zwrotne setState

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


Podsumowanie

Takie wskazówki zaoszczędziły mi dużo czasu i jestem pewien, że można ich znaleźć więcej. Trzymam kciuki i życzę miłego kodowania!


Oryginał tekstu w języku angielskim przeczytasz tutaj.

Lubisz dzielić się wiedzą i chcesz zostać autorem?

Podziel się wiedzą z 130 tysiącami naszych czytelników

Dowiedz się więcej