Являются ли пользовательские хуки специальными функциями типа Компонентов функций w.r.t. крюки? - PullRequest
1 голос
/ 18 июня 2019

Как мы знаем, если мы используем useState в Function Component, состояние не создается каждый раз на re-renders этого компонента Function, вместо этого оно использует существующее состояние.См. Example Компонент функции ниже:

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)}>
        Click me
      </button>
    </div>
  );
}

Где, когда вместо этого у нас есть useState в customHook (см. Ниже), каждый вызов "useCustomHook" создает новое состояние, что дает представление о том, что все пользовательские хуки являются обычными функциями.

function useCustomHook() {
  const [cnt, setCnt] = useState(0);
  return [cnt, setCnt];
}

1 Ответ

0 голосов
/ 19 июня 2019

Из приведенного ниже фрагмента видно, что useState вызов является постоянным внутри customHook так же, как он работает внутри обычного компонента.Вы можете отслеживать это и даже манипулировать им. Он не воссоздается при каждом вызове хука.

Из React DOCS: пользовательские хуки

Пользовательские хуки - это соглашение, которое естественно вытекает издизайн крючков, а не функция React.

Должен ли я называть свои пользовательские крючки, начинающиеся с «use»?

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

Выполните два компонента, используяТо же состояние Hook Share?

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

Как пользовательский хук получает изолированное состояние?

Каждый вызов хука получает изолированное состояние.Поскольку мы вызываем useFriendStatus напрямую, с точки зрения React наш компонент просто вызывает useState и useEffect.И, как мы узнали ранее, мы можем вызывать useState и useEffect много раз в одном компоненте, и они будут полностью независимы.

function App(){

  const [hookState,setHookState] = useSomeCustomHook();
  
  function updateHookState() {
    setHookState((prevState)=>prevState+1);
  }
  
  return(
    <React.Fragment>
      <div>Custom Hook State: {hookState}</div>
      <button onClick={updateHookState}>Count</button>
    </React.Fragment>
  );
}

function useSomeCustomHook() {
  const [hookState,setHookState] = React.useState(0);
  return ([
    hookState,
    setHookState
  ]);
}

ReactDOM.render(<App/>, document.getElementById('root'));
<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="root"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...