Dlaczego rekwizyty JSX nie powinny używać funkcji arrow lub bind?

Dlaczego nie powinieneś używać funkcji strzałek inline w rekwizytach JSX

Używanie funkcji strzałek lub wiązania W JSX jest złą praktyką, która szkodzi wydajności, ponieważ funkcja jest odtwarzana przy każdym renderowaniu.

1. Za każdym razem, gdy funkcja jest tworzona, poprzednia funkcja jest zbierana śmieci. Ponowne nadawanie wielu elementów może tworzyć jankesy w animacjach.

2. Użycie funkcji strzałki w linii spowoduje PureComponents, a składniki, które używają shallowCompare w shouldComponentUpdate metoda na rerender mimo wszystko. Ponieważ rekwizytor funkcji strzałki jest odtwarzany za każdym razem, płytkie porównanie zidentyfikuje go jako zmianę na rekwizytor, a komponent będzie ponownie odtwarzał.

Jak widać na poniższych przykładach - gdy używamy funkcji strzałek w linii, komponent <Button> jest ponownie wyświetlany za każdym razem (konsola pokazuje tekst "render button").

przykład 1-PureComponent bez inline handler

class Button extends React.PureComponent {
  render() {
    const { onClick } = this.props;
    
    console.log('render button');
    
    return (
      <button onClick={ onClick }>Click</button>
    );
  }
}

class Parent extends React.Component {
  state = {
    counter: 0
  }
  
  onClick = () => this.setState((prevState) => ({
    counter: prevState.counter + 1
  }));
  
  render() {
    const { counter } = this.state;
    
    return (
      <div>
        <Button onClick={ this.onClick } />
        <div>{ counter }</div>
      </div>
    );
  }
}

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id="root"></div>

przykład 2-PureComponent with inline handler

class Button extends React.PureComponent {
  render() {
    const { onClick } = this.props;
    
    console.log('render button');
    
    return (
      <button onClick={ onClick }>Click</button>
    );
  }
}

class Parent extends React.Component {
  state = {
    counter: 0
  }
  
  render() {
    const { counter } = this.state;
    
    return (
      <div>
        <Button onClick={ () => this.setState((prevState) => ({
          counter: prevState.counter + 1
        })) } />
        <div>{ counter }</div>
      </div>
    );
  }
}

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Wiązanie metod do this BEZ inlining funkcji strzałek

1. Powiązanie metody ręcznie w konstruktorze:

   class Button extends React.Component {
     constructor(props, context) {
       super(props, context);
   
       this.cb = this.cb.bind(this);
     }
   
     cb() {
   
     }
   
     render() {
       return (
         <button onClick={ this.cb }>Click</button>
       );
     }
   }
   

2. Wiązanie metody wykorzystującej proposal-class-fields z funkcją strzałki. Ponieważ jest to propozycja etapu 3, musisz dodać w zależności od tego, która z tych wartości jest większa, można ją przekształcić w bibliotekę babel.

   class Button extends React.Component {
     cb = () => { // the class property is initialized with an arrow function that binds this to the class
   
     }
   
     render() {
       return (
         <button onClick={ this.cb }>Click</button>
       );
     }
   }
   

Komponenty funkcyjne z wewnętrznymi wywołaniami

Kiedy tworzymy wewnętrzną funkcję (na przykład obsługę zdarzeń) wewnątrz komponentu funkcyjnego, funkcja będzie odtwarzana za każdym razem, gdy komponent jest renderowany. Jeśli funkcja zostanie przekazana jako Właściwości (lub poprzez kontekst) do komponentu potomnego (Button w tym przypadku), to dziecko ponownie wyrenderuje jako cóż.

przykład 1-element funkcyjny z wewnętrznym wywołaniem zwrotnym:

const { memo, useState } = React;

const Button = memo(({ onClick }) => console.log('render button') || (
  <button onClick={onClick}>Click</button>
));

const Parent = () => {
  const [counter, setCounter] = useState(0);
  
  const increment = () => setCounter(counter => counter + 1); // the function is recreated all the time
  
  return (
    <div>
      <Button onClick={increment} />
      
      <div>{counter}</div>
    </div>
  );
}

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

Aby rozwiązać ten problem, możemy zawinąć callback z useCallback() hook i ustaw zależności na pustą tablicę.

Uwaga: wygenerowana funkcja useState akceptuje funkcję updater, która dostarcza bieżący stan. W ten sposób nie musimy ustawiać aktualnego stanu jako zależności useCallback.

przykład 2 - Komponent funkcyjny z wewnętrznym wywołaniem zwrotnym owiniętym useCallback:

const { memo, useState, useCallback } = React;

const Button = memo(({ onClick }) => console.log('render button') || (
  <button onClick={onClick}>Click</button>
));

const Parent = () => {
  const [counter, setCounter] = useState(0);
  
  const increment = useCallback(() => setCounter(counter => counter + 1), []);
  
  return (
    <div>
      <Button onClick={increment} />
      
      <div>{counter}</div>
    </div>
  );
}

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>