Интенсивное чтение "React Conf 2019 - Day1"

JavaScript React.js

1. Введение

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

Я надеюсь, что интенсивное чтение по интерфейсу станет евангелистом на вашем пути к обучению и росту, поэтому в этом выпуске интенсивного чтения будет представлен актуальный контент React Conf 2019 — Day1.

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

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

2 Обзор и интенсивное чтение

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

Опыт разработчиков и опыт пользователей

  • Опыт разработки: DX (опыт разработки)
  • Пользовательский опыт: UX (пользовательский опыт)

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

Как оптимизировать опыт разработчиков?

легко использовать

React действительно стремится решить эту проблему, потому что React на самом деле является мостом для разработчиков, независимо от того, разрабатываете ли вы веб, ios или микроконтроллер, вы можете достичь этого с помощью унифицированного синтаксиса. React — это стандарт протокола (для лучшего понимания прочтите главу reactReconciler), React похож на HTML, но React может создавать больше, чем приложения HTML, React хочет создавать все.

Эффективное развитие

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

эластичность

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

Для проблем с UX у React также есть решения, такие как параллельный режим и приостановка.

Хотя React не идеален, цели и последствия приверженности React решению DX и UX очевидны для всех.Улучшение DX и UX должно стать общей тенденцией будущего развития фронтенд-технологий.

схема стиля

Facebook использует css-in-js, и в этом году в React conf есть техническое решение, позволяющее уменьшить размер файла стиля с 413 КБ до 74 КБ!

Узнайте об этой программе шаг за шагом, начиная с использования:

const styles = stylex.create({
  blue: { color: "blue" },
  red: { color: "red" }
});

function MyComponent(props) {
  return <span className={styles("blue", "red")}>I'm red now!</span>;
}

Выше написано, как эта схема написана, черезstylex.createСоздавайте стили,styles()Используйте стили.

Схема темы

Если тема определена с использованием переменных CSS, то скиннинг может быть выполнен самой внешнейclassЛегко решил:

.old-school-theme {
  --link-text: blue;
}

.text-link {
  color: var(--link-text);
}

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

<div class="old-school-theme">
  <a class="text-link" href="...">
    I'm blue!
  </a>
</div>

Инкапсулируйте его как компонент React, и вам не нужно использоватьcontextДождитесь возможностей JS, но оберните слойclassВот и все.

function ThemeProvider({ children, theme }) {
  return <div className={themes[theme]}>{children}</div>;
}

Схема иконок

Вот код svg, предоставленный дизайнером:

<svg viewBox="0 0 100 100">
  <path d="M9 25C8 25 8..." />
</svg>

Оберните его как компонент React:

function SettingsIcon(props) {
  return (
    <SVGIcon viewBox="0 0 100 100" {...props}>
      <path d="M9 25C8 25 8..." />
    </SVGIcon>
  );
}

В сочетании с упомянутой выше схемой темы вы можете управлять цветом темы svg.

const styles = stylex.create({
  primary: { fill: "var(--primary-icon)" },
  gighlight: { fill: "var(--highlight-icon)" }
});

function SVGIcon(color, ...props) {
  return (
    <svg>
      {...props}
      className={styles({
        primary: color === "primary",
        highlight: color === "highlight"
      })}
      {children}
    </svg>
  );
}

Секрет уменьшения размера стиля

const styles = stylex.create({
  blue: { color: "blue" },
  default: { color: "red", fontSize: 16 }
});

function MyComponent(props) {
  return <span className={styles("default", props.isBlue && "blue")} />;
}

Для приведенного выше кода файла стиля он в конечном итоге будет скомпилирован вc1,c2,c3триclass:

.c1 {
  color: blue;
}
.c2 {
  color: red;
}
.c3 {
  font-size: 16px;
}

Неожиданно нет оснований дляblueа такжеdefaultгенерировать соответствующиеclass, но генерируется из фактического значения стиляclass, какая польза от этого?

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

// 效果可能是 blue 而不是 red
<div className="blue red" />

// 效果一定是 red，因为 css-in-js 在最终编排 class 时，虽然两种样式都存在，但书写顺序导致最后一个优先级最高，
// 合并的时候就会舍弃失效的那个 class
<div className={styles('blue', 'red')} />

Это никогда не вызовет головной боли с переопределением стилей.

Что еще более важно, с увеличением файлов стилей,classСумма уменьшится. Это связано с тем, что недавно добавленныйclassПокрываемые свойства могли быть использованы другимиclassНаписано и сгенерировано, в настоящее время будет напрямую повторно использоваться соответствующий сгенерированный атрибутclassбез создания нового:

<Component1 className=".class1"/>
<Component2 className=".class2"/>

.class1 {
  background-color: mediumseagreen;
  cursor: default;
  margin-left: 0px;
}
.class2 {
  background-color: thistle;
  cursor: default;
  justify-self: flex-start;
  margin-left: 0px;
}

Как показывает эта демонстрация, нормальныйclass1а такжеclass2Существует много повторно определяемых свойств, но при замене на схему css-in-js скомпилированный эффект эквивалентен преобразованиюclassМультиплексировано и разобрано:

<Component1 classNames=".classA .classC .classD">

<Component2 classNames=".classA .classN .classD .classE">

.classA {
  cursor: default;
}
.classB {
  background-color: mediumseagreen;
}
.classC {
  background-color: thistle;
}
.classD {
  margin-left: 0px;
}
.classE {
  justify-self: flex-start;
}

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

схема размера шрифта

remПреимущество заключается в относительном размере шрифта, используяremВ комплекте очень удобно переключать размер шрифта веб-страницы.

Но проблема в том, что теперь промышленный дизайн привык использовать px в качестве единицы измерения, поэтому была создана новая схема компиляции: на этапе компиляцииpxавтоматически конвертировать вrem.

Это эквивалентно разрешениюpxРазмер шрифта модуля можно масштабировать произвольно с размером шрифта корневого узла.

Обнаружение кода

Статически обнаруживает ошибки типа, опечатки, проблемы совместимости браузера.

Онлайн-обнаружение проблем с элементами узла dom, таких как доступность, например aria-label замещающего текста.

Улучшить скорость загрузки

Процесс загрузки обычной веб-страницы выглядит следующим образом:

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

Так как же улучшить эту ситуацию? Во-первых, предварительная выборка, предварительный анализ запроса и выборка данных во время загрузки скрипта могут сэкономить много времени:

Так можно ли снова разделить загруженный код? Отметив, что не весь код воздействует на отрисовку пользовательского интерфейса, мы можем разделить модули наImportForDisplayа такжеimportForAfterDisplay:

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

Таким образом, исходный код можно загружать по сегментам и отображать по сегментам:

То же самое верно и для выборок, не все выборки должны использоваться на начальном этапе рендеринга. в состоянии пройтиrelayхарактеристики@deferОтметьте данные, которые могут быть загружены отложенно:

fragment ProfileData on User {
  classNameprofile_picture { ... }

  ...AdditionalData @defer
}

Данные также можно сегментировать, и первыми будут загружены данные на первом экране:

использоватьrelayРазделение кода также можно комбинировать на основе данных:

... on Post {
  ... on PhotoPost {
    @module('PhotoComponent.js')
    photo_data
  }

  ... on VideoPost {
    @module('VideoComponent.js')
    video_data
  }

  ... on SongPost {
    @module('SongComponent.js')
    song_data
  }
}

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

Можно видеть, что сочетание с реле может еще больше оптимизировать нагрузочную способность.

Опыт загрузки

МогуReact.Suspenseа такжеReact.lazyДинамическая загрузка компонентов. пройти черезfallbackУказание заполнителя для элемента может улучшить процесс загрузки:

<React.Suspense fallback={<MyPlaceholder />}>
  <Post>
    <Header />
    <Body />
    <Reactions />
    <Comments />
  </Post>
</React.Suspense>

SuspenseМожет быть вложенным, и ресурсы загружаются в том порядке, в котором они вложены, что обеспечивает естественную визуальную согласованность.

умный документ

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

Не только это, но и использование Typescript + MonacoEditor для определения синтаксиса и автоматических подсказок API на веб-страницах, этот опыт работы с документами поднялся на новый уровень.

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

GraphQL and Stuff

В этом разделе Amway использует интерфейс для автоматической генерации кода Typescript для повышения эффективности совместной отладки внешнего и внутреннего интерфейса, например go2dts.

Наша команда также открыла инструмент автоматической генерации интерфейса Typescript на основе swagger.pont,Добро пожаловать.

React Reconciler

Это наиболее насыщенный знаниями раздел о том, как использовать React Reconclier.

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

Например, в следующем примере мы пытаемся использовать пользовательскую функциюReactDOMMiniВизуализировать компонент React:

import React from "react";
import logo from "./logo.svg";
import ReactDOMMini from "./react-dom-mini";
import "./App.css";

function App() {
  const [showLogo, setShowLogo] = React.useState(true);

  let [color, setColor] = React.useState("red");
  React.useEffect(() => {
    let colors = ["red", "green", "blue"];
    let i = 0;
    let interval = setInterval(() => {
      i++;
      setColor(colors[i % 3]);
    }, 1000);

    return () => clearInterval(interval);
  });

  return (
    <div
      className="App"
      onClick={() => {
        setShowLogo(show => !show);
      }}
    >
      <header className="App-header">
        {showLogo && <img src={logo} className="App-logo" alt="logo /" />}
        // 自创语法
        <p bgColor={color}>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React{" "}
        </a>
      </header>
    </div>
  );
}

ReactDOMMini.render(<App />, codument.getElementById("root"));

ReactDOMMiniэто использоватьReactReconcilerСгенерированная функция рендеринга пользовательского компонента, полный код:

import ReactReconciler from "react-reconciler";

const reconciler = ReactReconciler({
  createInstance(
    type,
    props,
    rootContainerInstance,
    hostContext,
    internalInstanceHandle
  ) {
    const el = document.createElement(type);

    ["alt", "className", "href", "rel", "src", "target"].forEach(key => {
      if (props[key]) {
        el[key] = props[key];
      }
    });

    // React 事件代理
    if (props.onClick) {
      el.addEventListener("click", props.onClick);
    }

    // 自创 api bgColor
    if (props.bgColor) {
      el.style.backgroundColor = props.bgColor;
    }

    return el;
  },

  createTextInstance(
    text,
    rootContainerInstance,
    hostContext,
    internalInstanceHandle
  ) {
    return document.createTextNode(text);
  },

  appendChildToContainer(container, child) {
    container.appendChild(child);
  },
  appendChild(parent, child) {
    parent.appendChild(child);
  },
  appendInitialChild(parent, child) {
    parent.appendChild(child);
  },

  removeChildFromContainer(container, child) {
    container.removeChild(child);
  },
  removeChild(parent, child) {
    parent.removeChild(child);
  },
  insertInContainerBefore(container, child, before) {
    container.insertBefore(child, before);
  },
  insertBefore(parent, child, before) {
    parent.insertBefore(child, before);
  },

  prepareUpdate(
    instance,
    type,
    oldProps,
    newProps,
    rootContainerInstance,
    currentHostContext
  ) {
    let payload;
    if (oldProps.bgColor !== newProps.bgColor) {
      payload = { newBgCOlor: newProps.bgColor };
    }
    return payload;
  },
  commitUpdate(
    instance,
    updatePayload,
    type,
    oldProps,
    newProps,
    finishedWork
  ) {
    if (updatePayload.newBgColor) {
      instance.style.backgroundColor = updatePayload.newBgColor;
    }
  }
});

const ReactDOMMini = {
  render(wahtToRender, div) {
    const container = reconciler.createContainer(div, false, false);
    reconciler.updateContainer(whatToRender, container, null, null);
  }
};

export default ReactDOMMini;

Автор разбирает описание:

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

Создать экземпляр

Поскольку компонент React по сути является описанием, т.е.tag+ свойство, так чтоReconcilerНеважно, как создается элемент, нужно передатьcreateInstanceПолучите основные свойства компонента и используйте DOM API на веб-платформе для реализации:

createInstance(
    type,
    props,
    rootContainerInstance,
    hostContext,
    internalInstanceHandle
  ) {
    const el = document.createElement(type);

    ["alt", "className", "href", "rel", "src", "target"].forEach(key => {
      if (props[key]) {
        el[key] = props[key];
      }
    });

    // React 事件代理
    if (props.onClick) {
      el.addEventListener("click", props.onClick);
    }

    // 自创 api bgColor
    if (props.bgColor) {
      el.style.backgroundColor = props.bgColor;
    }

    return el;
  }

Причина, по которой React создает слой прокси для событий DOM, заключается в том, что все функции JSX на самом деле передаются в DOM не прозрачно, а через что-то вродеel.addEventListener("click", props.onClick)Способ реализации прокси.

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

Кроме тогоСоздание и удаление экземпляровМы должны повторно реализовать функцию обратного вызова платформы DOM, используя API платформы DOM, которая может не только обеспечить совместимость с API браузера, но и подключаться к не-WEB-платформам, таким как react-native.

обновить компоненты

ДостигнутоprepareUpdateа такжеcommitUpdateдля завершения обновления компонента.

prepareUpdateвернутьpayloadодеялоcommitUpdateФункция получает его и решает, как обновить узел экземпляра на основе полученной информации. Этот узел экземпляраcreateInstanceОбъект, возвращаемый функцией обратного вызова, поэтому, если в веб-среде возвращается экземпляр DOMInstance, все последующие операции будут использовать DOMAPI.

В заключение:reactСоздавайте значимые для бизнеса AST в первую очередь с независимым от платформы синтаксисом, используя при этомreact-reconcilerСгенерированная функция рендеринга может анализировать этот AST и предоставлять ряд функций обратного вызова для реализации полных функций рендеринга пользовательского интерфейса.react-domтеперь на основеreact-reconcilerнаписано.

Оптимизация размера значков

Благодаря оптимизации команда Facebook уменьшила размер значка с 4046,05 КБ до 132,95 КБ, а объем уменьшился на поразительные 96,7%, что составляет 19,6% от общего объема пакета!

Реализация очень проста, вот код, используемый оригинальной иконкой:

<FontAwesomeIcon icon="coffee" />
<Icon icon={["fab", "twitter"]} />
<Button leftIcon="user" />
<FeatureGroup.Item icon="info" />
<FeatureGroup.Item icon={["fail", "info"]} />

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

import {faCoffee,faInfo,faUser} from "@fontawesome/free-solid-svg-icons"
import {faTwitter} from '@fontawesome/free-brands-svg-icons'
import {faInfo as faInfoFal} from '@fontawesome/pro-light-svg-icons'

<FontAwesomeIcon icon={faCoffee} />
<Icon icon={faTwitter} />
<Button leftIcon={faUser} />
<FeatureGroup.Item icon={faInfo} />
<FeatureGroup.Item icon={faInfoFal} />

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

Это также означает, что iconFont в некотором смысле обречен на устаревание, потому что файлы шрифтов в настоящее время не могут быть загружены по запросу, и только проекты, которые используют все значки SVG, могут использовать эту оптимизацию.

Git & Github

В этом разделе представлены базовые знания Git и использование Github.Автор пропускает содержательную часть и прямо перечисляет два момента, о которых вы, возможно, не знаете:

Вмешиваться в определение основного языка проекта Github

Если код, который вы отправляете, содержит много автоматически сгенерированных файлов, язык, который вы фактически используете, может не анализироваться Github как основной язык..gitattributesФайл игнорирует обнаружение указанной папки:

static/* linguist-vendored

Таким образом, часть языковых файлов будет проигнорирована.static/папка.

Советы по хукам Git

Вот еще несколько поучительных моментов, которые мы можем сделать с помощью хуков Git:

  • Блок фиксирует мастер.
  • Выполните обнаружение красивее/небрежности/шутки перед фиксацией.
  • Обнаружение спецификаций кода, конфликты слияния, обнаружение больших файлов.
  • После успешной фиксации выдается подсказка или записывается в журнал.

Но у хуков Git все еще есть ограничения:

  • Легко обойти: --no-verifuy --no-merge --no-checkout ---force.
  • Локальные хуки не могут быть отправлены, что приводит к другим правилам разработки проекта.
  • Он не может заменить CI, защиту филиалов на стороне сервера и проверку кода.

Вы можете себе представить, что в среде WebIDE можно отключить обход обнаружения, настроив команду git, что естественным образом решает проблему несогласованности во второй среде.

GraphQL + Typescript

В GraphQL нет поддержки типов, и вручную создавать файл типов очень неудобно:

interface GetArticleData {
  getArticle: {
    id: number;
    title: string;
  };
}

const query = graphql(gql`
  query getArticle {
    article {
      id
      title
    }
  }
`);

apolloClient.query<GetArticleData>(query);

Обслуживание одного и того же кода, разбросанного в двух местах, обязательно принесет проблемы, мы можем использовать, например,typed-graphqlifyЭта библиотека решает проблему типа:

import { params, types, query } from "typed-graphqlify";

const getArticleQuery = {
  article: params({
    id: types.number,
    title: types.string
  })
};

const gqlString = query("getUser", getUserQuery);

Пока вы определяете его один раз, вы можете автоматически сгенерировать GQLString и получить тип Typescript.

Интернационализация документа React

Даже Google Translate не очень надежен, а интернационализированные документы по-прежнему зависят от человеческой плоти.Nat AlisonИспользуйте Github, чтобы полностью мобилизовать силы людей со всего мира и совместно строить международные склады в рамках группы reactjs.

Правила именования интернационализированных складовreactjs/xx.reactjs.org, например, интернационализированный склад для упрощенного китайского языка:GitHub.com/реагировать JS/это-…

Из ридми репозитория видно, что правила обслуживания следующие:

  • Пожалуйста, разветвите этот репозиторий.
  • Вытяните новую ветку на основе основной ветки в разветвленном репозитории (имя берется вами).
  • Переведите (откорректируйте) выбранные вами статьи и отправьте их в новую ветку.
  • Отправьте запрос на извлечение в этот репозиторий на этом этапе.
  • Кто-то проверит запрос на слияние, и когда более двух человек примут запрос на слияние, ваш перевод будет объединен в репозиторий.
  • Удалите созданную вами ветку (если продолжите участие, обратитесь к процессу синхронизации).

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

тебе нужен редукс?

В теме потока данных нет ничего нового, но это краткое изложение потока данных React Conf совершенно искренне и резюмирует следующие моменты:

  1. Глобальный поток данных сейчас не нужен, как Redux, но нельзя сказать, что его вообще нельзя использовать, по крайней мере, нужно использовать, когда глобальное состояние более сложное.
  2. Не используйте только одну схему потока данных, лучше выбрать схему, основанную на области действия состояния.
  3. Инженерная технология отличается от науки, в инженерном мире нет лучших решений, есть только лучшие решения.
  4. Даже если есть идеальное решение, не прекращайте учиться, всегда будут новые знания.

веб-история

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

3 Резюме

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

Видение команды React состоит в том, чтобы сделать React всеохватывающим, улучшить опыт разработки глобальных разработчиков и улучшить пользовательский опыт глобальных продуктов.Исходя из этой цели, React Conf, естественно, может не только содержать технические детали, такие как DOM Diff, Reconciler и т. д., но также должен показать, как React может помочь миру, разработчикам, как позволить этим разработчикам помогать пользователям, как способствовать развитию отраслевых стандартов, как позволить React сломать барьеры национальных границ и языков.

По сравнению с другими front-end конференциями с большим количеством галантереи React Conf кажется более сложной тематикой, но это воплощение гуманистических чувств.Я считаю, что только технические команды с более высокой миссией и видением и искренней помощью другим могут иди дальше.

Адрес обсуждения:Интенсивное чтение «React Conf 2019 — Day1» · Выпуск №214 · dt-fe/weekly

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

Сфокусируйся наАккаунт WeChat для интенсивного чтения в интерфейсе

Заявление об авторских правах: Бесплатная перепечатка - некоммерческая - не производная - сохранить авторство (Лицензия Creative Commons 3.0)

Категории