W Reakcie zwykle przekazujemy rekwizyty do komponentu potomnego w następujący sposób:

const Parent = ({ foo, bar, baz, myFoo, myBar, myBaz }) => <Child foo={foo} bar={bar} baz={baz} /> (1)

Obecnie wymyśliłem alternatywny sposób, aby to zrobić:

const Parent = ({ foo, bar, baz, myFoo, myBar, myBaz }) => <Child {...{ foo, bar, baz }} /> (2)

IMO (2) oszczędza dużo czasu i wysiłku związanego z pisaniem. Jednak:

  1. Czy są jakieś wady z (2)? Na przykład, czy (2) uważa się za anty-wzorzec React?
  2. Wiem, że mówienie o wydajności bez pomiaru jest złe, ale zastanawiam się, czy są jakieś problemy z wydajnością w (2)?

Aktualizacja 1: dodałem myFoo, myBar, myBaz w rekwizytach rodziców. Proszę zauważyć, że nie chcę rozpowszechniać wszystkich rekwizytów na komponent podrzędny, ponieważ jest to uważane za złą praktykę, która skutkuje niepotrzebnymi rekwizytami w komponencie podrzędnym.

2
Cam Song 2 kwiecień 2020, 19:12

3 odpowiedzi

Najlepsza odpowiedź

Jedyną wadą jest to, że czasami jest to trudne do zrozumienia, używając pierwszego podejścia, sprawiasz, że kod jest bardziej czytelny i wyraźny. Oczywiście, jeśli masz jakąś dokumentację dotyczącą komponentów, na przykład storybook lub coś, co pomoże innym twórcom zrozumieć rekwizyty, których potrzebuje komponent, nie ma znaczenia użycie drugiego podejścia (rozprzestrzenianie rekwizytów), ale stworzenie rzeczy czytelny, należy trzymać się pierwszego (deklarując każdy rekwizyt jeden po drugim).

Sprawdź tę regułę eslint-react-plugin https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md podsumowuje, dlaczego lepiej jest użyć pierwszego podejście.

1
jean182 2 kwiecień 2020, 16:29
  1. Dlaczego miałoby być uważane za anty-wzór? W końcu w tym przypadku operator spreadu jest przydatny, prawda?

  2. Nie powinieneś przejmować się wydajnością. To i tak zostanie przetransponowane do zwykłego starego javascript (przez babel lub coś podobnego). To tylko cukier syntaktyczny.

0
Cristian Riță 2 kwiecień 2020, 16:35

Możesz przepisać swój kod na:

const Parent = (props) => <Child {...props} />

I tak naprawdę jest to bardzo częste w reakcji. Jeśli potrzebujesz foo, bar lub baz gdzieś indziej, możesz napisać to w ten sposób:

const Parent = (props) => {
  const { foo, bar, baz } = props;
  // do something with foo, bar or baz
  return <Child {...props} />;
}

Wracając do pytań:

1) Nie, to nie jest anty-wzorzec, ale zamiast tego powinieneś użyć powyższych podejść (nigdy nie widziałem kodu podobnego do twojego przykładu w żadnym projekcie do tej pory). Wadą może być to, że tak naprawdę nie ma już tego, co przekazujesz do Child i możesz przekazać więcej niż potrzebujesz. Na przykład. props z Parent mogłoby mieć dodatkowe pole, takie jak faz i po prostu przekazałeś je do Child i nigdy by go nie użyło.

2) Nie mogę myśleć o żadnym znaczącym problemie z wydajnością. W swoich projektach stosuję to podejście bardzo często i nigdy nie zauważyłem żadnych problemów z wydajnością.

0
ysfaran 2 kwiecień 2020, 16:40