React Hooks и jsx-no-lambda предупреждение - PullRequest
Новая
       24

React Hooks и jsx-no-lambda предупреждение

0 голосов
/ 04 марта 2019

так что теперь мы не можем использовать хуки как старый стиль функций событий, кроме отключения предупреждения, что является лучшим способом вызова функции события, которая не нарушает правило 

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}> // Lambdas are forbidden in JSX attributes due to their rendering performance impact (jsx-no-lambda)
        Click me
      </button>
    </div>
  );
}

1 Ответ

0 голосов
/ 04 марта 2019

При использовании хуков потеря производительности при создании встроенной функции стрелки незначительна для преимуществ, которые она имеет по сравнению с компонентами класса, и, следовательно, вам не нужно беспокоиться о функциях стрелки при рендеринге.

Вы можете отключить это правило eslint.

Однако вы все еще улучшаете свой код, написав метод increment и запомнив его, используя useCallback hook 

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = React.useState(0);
  const increment = React.useCallback(() => {
      setCount(prev => prev+1);
  }, [])
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>
        Click me
      </button>
    </div>
  );
}

ReactDOM.render(<Example />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="app"/>
...