Можно ли передать React.hook в функцию? - PullRequest
Новая
       5

Можно ли передать React.hook в функцию?

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

Могу ли я передать React.hooks в функцию и использовать ее там? 

    const [X, setX] = useState('');

    function  Y(useX){
       useX('string');
    }
    Y(setX)

Ответы [ 3 ]

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

В этом случае передается не функция ловушки, а функция установки, ограничения ловушки не применимы к Y(setX).Оно не обязательно должно находиться в области видимости компонента: 

function  Y(setX){
  setX('string');
}

const Comp = () => {
  const [X, setX] = useState('');
  Y(setX);
  ...
}

В зависимости от использования может быть полезно запоминание, например, если () => Y(setX) должно быть передано как опора: 

const Comp = () => {
  const [X, setX] = useState('');
  const setY = useCallback(() => Y(setX), []);
  ...
}
0 голосов
/ 02 марта 2019

При использовании перехватчиков вы должны соблюдать определенные правила перехвата (на данный момент их всего два):

  1. Только перехватчики вызовов на верхнем уровне
  2. Звонки только из функций реагирования

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

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

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

НО!

В вашем примере кода вы не передаете функцию .React.useState - это хук, но возвращаемое setX - нет. Вы можете передать его так, как вам нравится, и вы на самом деле должны передать его своим обычным функциям или пользовательским хукам!

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

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

Так 

const App = () => {
    const [X, setX] = React.useState('x');

    function Y(useX){
       useX('string');
    }

    Y(React.useState);
    
    return <div>Hello {X}</div>
}

ReactDOM.render(<App/>, 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" />

будет в порядке.

Но приведенный ниже код не будет работать 

const App = () => {
    const [X, setX] = React.useState('x');

    function Y(useX){
       useX('string');
    }
    
    
    return <div>Hello {X} <button onClick={() => {Y(React.useState)}}>Click</button></div>
}

ReactDOM.render(<App/>, 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" />

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

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

Технически, еслиuseX - это пользовательский хук, по сути, это функция, которая вызывается из компонента, содержащего хуки верхнего уровня

...