Super Sexy React Hooks (1): почему она уникальна

Как следует из названия, я собираюсь написать серию статей, посвященных React Hooks.

За последние шесть месяцев я применил React Hooks ко многим крупным проектам, 5 из которых были полностью рефакторинг, а другие проекты использовались экономно из-за нехватки времени.

Эти предметы включают

React Native
Промежуточные и фоновые приложения на основе рефакторинга ant-design-pro
Приложение Taro на основе React, ориентированное на разработку небольших программ
Самостоятельно созданное веб-приложение на основе приложения create-реагировать
Преобразованные изоморфные приложения на основе фреймворка beidou и др.

Один из элементов useState был использован 2053 раза.

После использования React Clots Tools у меня много вещей, которые я хочу поделиться с вами, что можно рассматривать как краткое изложение моего роста в этом году.

В Интернете есть множество статей, которые учат вас использовать хуки React, но очень мало статей, которые помогут нам правильно их использовать. И это цель моего резюме.

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

Будет много статей, которые можно написать только в свободное время.Это может занять больше месяца или даже больше.Я надеюсь, что заинтересованные студенты могут быть немного терпеливы.Статья будет иметь приоритет в моем публичном аккаунте.Я не знаюопубликовано в. В этой статье сначала кратко изложено, почему стоит начать использовать React Hooks и что нельзя пропускать.

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

Хотя в этой серии статей в основном анализируются хуки React, ее также можно использовать в качестве вводного руководства по React, и я постараюсь сделать ее максимально простой для понимания.

React Hooks — это успешное саморазрушение React.

Вот что я действительно чувствую после того, как много использовал React Hooks.

Команда реагированияВсегда думать о том, как ниспровергнуть себя. Для детской обуви, которая в основном атакует React, это действительно счастье и боль.

И ощущение, которое мне дает React Hooks, несомненно, больше счастья, чем боли.

1. Лаконичность видна невооруженным глазом

Проведем простое сравнение с картинкой:

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

Конечно, простота ограничена, недостаточно шокирующа и достаточно убедительна. Другой пример.

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

Количество строк кода сократилось почти вдвое.

import React, { useState, useEffect } from 'react';

interface Props {
  value: number,
  onChange: (num: number) => any
}

export default function Counter({ value, onChange }: Props) {
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    value && setCount(value);
  }, [value]);

  return [
    <div key="a">{count}</div>,
    <button key="b" onClick={() => onChange(count + 1)}>
      点击+1
    </button>
  ]
}

Я думаю, все знают, что означает половина кода!

2. Начать проще

Когда команда выбирает React в качестве основного стека технологий, возникает большая проблема, заключающаяся в том, что набирать людей относительно сложно (по крайней мере, в случае с Чэнду). тот, кто знает Vue, и другой, кто знает React, все обманчивы.За 2 года я так и не нанял человека, который знает React. Наверное, все думают, что vue лучше изучить.

Я нашел давнюю статью и записал свои ощущения, когда впервые изучил React.

В то время я чувствовал, что React сложен в изучении, и однажды я подумал, что не смогу хорошо его освоить.Поэтому я все еще пишу статью, чтобы убедить всех изучить angular.现在想想真的有点点搞笑。

Для начинающих нелегко начать с реагирования, так почему же это сложно? Подведеться с моим собственным опытом:

Жизненный цикл сложен для понимания и еще более сложен для профессионального использования.

Мы можем относительно легко запоминать жизненные циклы, но применять их на практике — совсем другое дело. Еще труднее понять жизненный цикл нескольких сред выполнения. И как сделать оптимизацию производительности, эти жизненные циклы являются наиболее важными. Если вы не будете осторожны, написанный вами код может даже привести к сбою программы.

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

Но это и первый камень преткновения на нашем пути вперед.

Зрелое и надежное компонентное мышление, трудно формируемое

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

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

Самое популярное решение для управления состоянием, Redux, имеет много концепций и его трудно понять.

Идея Redux очень хороша, но ее нелегко понять на практике. Кроме того, многие люди изучают Redux черезКитайская документация Redux, я думаю, что это усугубляет сложность обучения, но после его изучения становится головокружительно!

Студенты-самоучки, скорее всего, закроют React из-за избыточности.

Компоненты более высокого порядка не легко понять

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

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

// 传入基础组件作为参数
const withRouter = (Component) => {

  // 创建中间组件
  const C = (props) => {
    const { wrappedComponentRef, ...remainingProps } = props;
    return (
      <Route render={routeComponentProps => (
        // wrappedComponentRef 用来解决高阶组件无法正确获取到ref的问题
        <Component {...remainingProps} {...routeComponentProps} ref={wrappedComponentRef} />
      )} />
    )
  }

  C.displayName = `withRouter(${Component.displayName || Component.name})`;
  C.WrappedComponent = Component;
  C.propTypes = {
    wrappedComponentRef: PropTypes.func
  }

  // hoistStatics类似于Object.assign，用于解决基础组件因为高阶组件的包裹而丢失静态方法的问题
  return hoistStatics(C, Component);
}

export default withRouter;

Отличные решения есть в сообществе, многие люди использующие React долгое время не знали

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

Более популярные Redux, React-роутер и т. д. не являются официальными решениями React. Другие решения, такие как redux chunk, redux saga и т. Д., Многие изучающие React не знают, что это такие вещи. В этом случае стоимость обучения скрыто значительно возрастает.

По сравнению с прошлым появление хуков React значительно снизило стоимость обучения React. В частности, отражено как:

Жизненный цикл не может быть изучен. Хуки React используют новую концепцию для управления работой компонентов.
Компоненты более высокого порядка не нужно изучать. Хуки React могут прекрасно решать проблемы, которые хотят решить компоненты более высокого порядка, и они более надежны.
redux больше не является обязательным. Мы можем управлять состоянием компонента другими способами.

3. Отличный опыт разработки

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

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

я считаю,React Hooks — это самый быстрый способ реализовать нужный метод разработки.

В-четвертых, его проще комбинировать с Typescript.

Нас мало волнует, как компоненты React hooks работают с машинописным текстом. Это преимущество, которого нет у компонентов класса.

Многие друзья в группе часто путаются при изучении машинописного текста Как применить машинописный текст к React? Такие проблемы могут быть еще более запутанными в компонентах более высокого порядка. Я верю, что студенты, пережившие эти трудности, обладают глубоким пониманием.

Даже если вы знаете, как это исправить, это не так просто. Например, когда мы попытались использовать ts для четкого описания типа данных, передаваемого реквизитами компонента Demo, нам пришлось определить дополнительные интерфейсы.

import React from 'react';
import { connect } from 'net';

interface ConnectProps {
  dispatch: any,
  history: any
}

interface DemoProps {
  name: string,
  age: number
}

interface InjectedProps extends DemoProps, ConnectProps {}

@connect
export default class Demo() {
  get injected() {
    return this.props as 
  }
  render() {
    return (
      <div>hello, world.</div>
    )
  } 
}

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

В целом, React Cooks - это всеобъемлющее улучшение опыта развития реагирования и революции в эффективности. Если вы используете REACT, вы не использовали React Cloots, я смею гарантировать, что это сожаление.

В соответствии с принципом не делать вид, что не провоцирую войну, эта серия статей субъективно не выражает никаких мнений и взглядов на интерфейсные фреймворки, такие как vue/angular. Если вы увлеклись и слишком много хвастаетесь, не думайте об этом~

Все кейсы из этой серии статей можно посмотреть по следующему адресу

GitHub.com/advance-вместе…

Эта серия статей является оригинальной, пожалуйста, не перепечатывайте без разрешения, пожалуйста, не забудьте отправить мне личное сообщение