Реагируйте на новые функции и примеры, чтобы объяснить хуки (D)

JavaScript React.js

Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статьяGitHub GitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

Использование реф-хуков

Ссылки, используемые в компонентах класса, обычно включают:

  • String Ref
  • Callback Ref
  • CreateRef

Вышеупомянутое не имеет возможности использовать их в функциональных компонентах, вместо этогоuseRefКрючки.

useRefСуществует два основных сценария использования:

  • Получить дескриптор дочернего компонента или узла DOM
  • Хранение общих данных между циклами рендеринга

Вы можете подумать, что состояние можно сохранять и в циклах рендеринга, ноstateНазначение приведет к перезагрузке, ноref

Позвольте мне проиллюстрировать пример: получите ручку дочернего компонента или узла DOM

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

По сути,useRefкак бы в своем.currentСвойства содержат «коробку» изменяемых значений.

Позвольте мне проиллюстрировать это на примере: хранение общих данных между циклами рендеринга.

function App (props) {
  const [count, setCount] = useState(0);
  let it
  useEffect(() => {
    it = setInterval(() => {
      setCount(count => count + 1)
    }, 1000)
  } , [])

  useEffect(() => {
    if (count >= 5) {
      clearInterval(it)
    }
  })

  return (
    <div style={{padding:'100px'}}>
      <h1>{count}</h1>
    </div>
  )
}

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

результат операции:

показать, когдаcountдля5Время не остановилось, почему так?

Потому чтоclearInterval, itЭта переменная больше неsetIntervalТот, когда он был назначен, сбрасывается каждый раз, когда приложение перерисовывается. тогда вы можете использоватьuseRefДля решения этой проблемы.

function App (props) {
  const [count, setCount] = useState(0);
  const it = useRef(null)
  
  useEffect(() => {
    it.current = setInterval(() => {
      setCount(count => count + 1)
    }, 1000)
  } , [])

  useEffect(() => {
    if (count >= 5) {
      clearInterval(it.current)
    }
  })

  return (
    ...
  )
}

использоватьuseRefсоздатьit, когдаsetIntervalПрисваивается возвращенным результатамitизcurrentАтрибуты.

результат операции:

ref这一种访问 DOM 的主要方式。 если вы будетеrefОбъекты<div ref={myRef} />refобъект.current

Однако,useRef()Сравниватьref** больше полезных свойств. Он может легко сохранить любое значение переменной **, аналогично использованию полей экземпляра в классе.

这是因为它创建的是一个普通 Javascript 对象。 а такжеuseRef()и построить один{current: ...}Единственная разница в объектах заключается в том,useRefбудет возвращать один и тот же объект ref при каждом рендеринге.

Помните, что useRef не уведомляет вас об изменении содержимого объекта ref. Изменение свойства .current не приведет к повторному рендерингу компонента. Если вы хотите запустить некоторый код, когда React привязывает или отвязывает ссылку узла DOM, вам нужно использовать для этого ссылку обратного вызова.

Пользовательский крючок

В первых трех статьях мы говорили о трех основных проблемах оптимизации компонентов класса:

  • Логическое состояние мультиплексирования для облегчения
  • thisвопрос

countЛогика инкапсулирована с помощью пользовательского хука:

function useCount(defaultCount) {
  const [count, setCount] = useState(defaultCount);
  const it = useRef()
      
  useEffect(() => {
    it.current = setInterval(() => {
      setCount(count => count + 1)
    }, 1000)
  } , [])

  useEffect(() => {
    if (count >= 5) {
      clearInterval(it.current)
    }
  })
  
  return [count, setCount]
}


function App (props) {
  const [count, setCount] = useCount(0);

  return (
    <div style={{padding: '100px'}}>
      <h1>{count}</h1> 
    </div>
  )
}

текущий результат:

Можно видеть, что эффект операции такой же, как и выше.

Определение Хук — это функция, имя которой начинается с «использовать», и внутри функции могут быть вызваны другие хуки.. Кажется, что мы ничем не отличаемся от написания функциональных компонентов в способе настройки функций.Действительно, самая большая разница между пользовательскими компонентами и функциональными компонентами — это разница между вводом и выводом.

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

function useCounter(count) {
  return (
    <h1>{count}</h1>
  )
}

В вызове компонента приложения:

function App (props) {
  const [count, setCount] = useCount(0);
  const Counter = useCounter(count)
  return (
    <div style={{padding: '100px'}}>
      {Counter}
    </div>
  )
}

текущий результат:

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

Использование закона Хука

Используйте хуки только на верхнем уровне

Не вызывайте хуки в циклах, условных выражениях или гнездах, всегда вызывайте их на верхнем уровне вашей функции React. Следуя этому правилу, вы можете гарантировать, что хуки вызываются в одном и том же порядке при каждом рендеринге. Здесь React может поддерживать правильное состояние ловушки для нескольких вызовов useState и useEffect.

Вызывайте хуки только в функциях React

Вместо того, чтобы вызывать хуки из обычных функций JavaScript, вы можете:

  • Вызов хуков в функциональных компонентах React
  • Вызов другим пользовательским крючком в крючке

  • constructor：函数组件不需要构造函数。 Вы можете позвонитьuseStatestate.如果计算的代价比较昂贵，你可以传一个函数给useState.

  • getDerivedStateFromProps: вместо этого запланируйте обновление во время рендеринга

  • shouldComponentUpdate: подробности см. на [Официальном веб-сайте] [9].

  • render: это само тело функционального компонента.

  • componentDidMount, componentDidUpdate, componentWillUnmount: useEffect Hook может выражать комбинацию всего этого (включая менее распространенные сценарии).

  • componentDidCatch and getDerivedStateFromError: для этих методов нет эквивалентной хуковой формулировки, но вскоре она будет добавлена.

Как принудительно обновить компонент хуков

И useState, и useReducer Hook откажутся от обновления, если значение будет одинаковым дважды до и после. Изменение состояния на месте и вызов setState не приведет к повторному рендерингу.

В общем, вы не должны изменять локальное состояние в React. Однако, как выход, вы можете использовать инкрементный счетчик, чтобы принудительно выполнить повторный рендеринг, даже если состояние не изменилось:

  const [ignored, forceUpdate] = useReducer(x => x + 1, 0);

  function handleClick() {
    forceUpdate();
  }

По возможности избегайте этого шаблона.

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Категории