Официальные документы могут научиться следить за крючками на странных

React.js
Официальные документы могут научиться следить за крючками на странных

Hooks

  1. аналогияClassComponentHooksвремя исполнения

  2. Постепенно привыкнув к этому, я обнаружил, чтоHooksвремя выполнения и生命周期又有些不同。 НапримерcomponentWillReceivePropsКоторый соответствуетHooks?

  3. Запутался, иди поищиHooksЧтение статьи на базовом уровне

какAPI, неужели нельзя просто и мило называть по документу,HooksПочему это так сложно?

ReactЧиновник также нашел эту проблему,React Переписать документациюсказал,Reactосновываться наHooksПереписать документацию.

Эта статья в основном включает два аспекта:

  1. объяснятьHooksПричина, по которой трудно учиться

  2. дать обучениеHooksпредложение

Базовая архитектура React

Его можно обобщить формулойReact:

const UI = fn(state);

视图можно рассматривать как状态проходить через函数отображение.

Взаимодействие пользователя с интерфейсом можно рассматривать как постоянную реализацию этой формулы.

Эта формула слишком коротка, нет объясненияstateОткуда (штат) приходит, давайте расширимся:

const state = reconcile(update);
const UI = fn(state);

  1. взаимодействие с пользователемupdate(продлить)

  2. updateпроходить черезreconcileшаги для расчета текущего приложенияstate

  3. fnБудуstateСопоставлено с просмотром изменений (пользовательский интерфейс)

мы даемfnИмя:commit:

const state = reconcile(update);
const UI = commit(state);

ТакupdateГде оно возникает? Конечно, от взаимодействия с пользователем, например: события кликов.

такReactБазовая архитектура может быть упрощена до трех шагов:

  • взаимодействие с пользователемupdate

  • state = reconcile(update);

  • UI = commit(state);

ClassComponentУчитьHooks

Уровень абстракции для функций жизненного цикла

У нас уже есть полная базовая архитектура, которая управляет обновлениями представлений. Как разработчикам следует использовать эту архитектуру?

Можно провести аналогию с уровнем абстракции компьютера:

高层：应用程序
中层：操作系统
底层：计算机组成架构

вести перепискуReact:

高层：应用程序       ClassComponent生命周期
中层：操作系统       介入架构的API
底层：计算机组成架构  React底层架构

можно увидеть,生命周期函数Он относится к более высокому уровню абстракции. Это также разработано, чтобы облегчить разработчикам начало работы.React.

представьте себеVue2Разработчик собираетсяReactСтек технологий, просто нужна аналогияVueжизненный цикл, чтобы учитьсяReactжизненный цикл.

все это вHooksОднако никаких проблем до прибытия...

Крючки уровней абстракции

HooksОтносится к среднему уровню абстракции. То есть,HooksНепосредственное вмешательство в текущий процесс базовой архитектуры.

高层：应用程序       
中层：操作系统       Hooks
底层：计算机组成架构  React底层架构

когда мы используем生命周期函数сравниватьHooks, на самом деле используя高抽象层级вещи для описания低抽象层级вещи.

Животное --> Млекопитающее --> Крупный рогатый скот --> Корова

Ибо человек видел только корову, других животных никогда не видел, как ему объяснить哺乳动物Что это такое?

Именно из-за асимметричного уровня абстракции, по причине生命周期函数Обучение по аналогииHooksстолкнется с проблемами.

Как выучить хуки

теперь, когдаHooks

  • взаимодействие с пользователемupdate

  • state = reconcile(update);

  • UI = commit(state);

Формула управления, давайте объясним несколько общихhook

useState

Например:

function App() {
  const [state, updateState] = useState(0);
  return <div onClick={() => updateState(state + 1)}></div>;
}

useState

  1. законсервированныйstate

  2. ИзменятьstateМетодыupdateState

Формула контраста,stateОн принадлежит формуле, рассчитанной на шаге 2:

  • state = reconcile(update);

На данный момент вид не обновлен.

пользовательские кликиdivвызыватьupdateState, что соответствует шагу 1 формулы:

  • взаимодействие с пользователемupdate

так позвониupdateState

когдаreconcileРассчитатьstate

  • UI = commit(state);

useEffect

Например:

useEffect(doSomething, [xx, yy])

useEffectdoSomethingВызывается асинхронно после завершения третьего шага:

  • UI = commit(state);

так вdoSomethingПредставление можно получить внутри функции для завершения обновленного представления.

второй параметр[xx, yy]как зависимость, решилdoSomethingбудет называться.

useLayoutEffect

отличный отuseEffectВызывается асинхронно после выполнения третьего шага,useLayoutEffectбудет выполнен на третьем шагеUIВыполняется синхронно после операции.

useRef

useStateа такжеuseEffect

那么这三个步骤如何交流呢？ пройти черезuseRef.

useStateuseLayoutEffectдля третьего шага,useEffectПосле завершения третьего шага.

использоватьuseRef, вы можете достичь цели обмена данными ссылочного типа между различными шагами.

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

Разработчикам нужно только пройти базовыйHooksсобранный自定义hook, логика может выполняться на различных этапах процесса выполнения базовой архитектуры.

Обучение снизу вверх ставит телегу впереди лошади?

Некоторые одноклассники опровергнут: учись преждеReactнужно учиться生命周期函数Сроки исполнения, узнайте сейчасHooksнужно учиться底层架构运行流程. Разве это не ставит телегу впереди лошади и не усложняет задачу?

вообще-то нет. Я задам вам несколько вопросов:

  1. componentWillReceivePropsПочему он отмечен какunsafe?

  2. getDerivedStateFromPropsВы использовали его?

  3. this.setStateСинхронный или асинхронный?

И生命周期函数Сопутствующие вопросы совсем не простые! Многие пользовались несколько летReactПередняя часть не обязательно отвечает вышеизложенному.

Как высокий уровень абстракции,生命周期函数隐藏了太多实现细节。 в то же времяReactСлишком гибкий, не нравитсяVueпройти через模版语言Действия разработчика ограничены.

Результат: другойReactРазработчики пишут всякую чушьClassComponent.

В отличие от底层架构运行流程УчитьHooks:

  • 底层架构运行流程то естьReactАбсолютная истина, не скрывающая большей абстракции

  • HooksСпецификация написания ограничивает замечательные операции разработчика

Единственная проблема здесь - отсутствие копии с底层Документы отправления. Это тожеReact

ReactДемистификация технологии ReactУчить.

Здесь есть и другие точки зрения.Hooksстатья:

Категории