Шокирующий релиз Taro 1.3: полная поддержка синтаксиса JSX и HOOKS

внешний интерфейс Апплет WeChat Taro
Шокирующий релиз Taro 1.3: полная поддержка синтаксиса JSX и HOOKS

После выпуска Taro 1.2, Taro получила огромную похвалу и внимание в отрасли: количество звезд на GitHub превышает 19 000, а количество загрузок NPM занимает первое место среди аналогичных фреймворков разработки. углубленное и эффективное сотрудничество.

Taro 1.3 — это версия, которую мы готовили дольше всего: после 6 месяцев разработки, почти 2000 представлений кода и совместного участия почти 100 разработчиков. Мы наконец-то рады представить сегодня Taro 1.3.

Особенности Таро 1.3 включают, но не ограничиваются:

  • Поддержите разработку быстрых приложений и мини-программ QQ
  • Полная поддержка синтаксиса JSX и React Hooks.
  • Значительно улучшить производительность и удобство использования H5
  • Taro Doctor

Поддержите разработку быстрых приложений и мини-программ QQ

Режим разработки быстрого приложения очень особенный, его API, система компонентов, библиотека компонентов и другие небольшие программы сильно различаются, а быстрое приложение является лишь стандартом, и каждый производитель Android имеет разные реализации среды выполнения. И эту «твердую кость» окончательно перегрыз Таро.

Как новый контейнер апплета, апплет QQ, как правило, плохо изучен, но Taro также первым реализовал поддержку апплета QQ.

Поддержка быстрых приложений и мини-программ QQ означает, что Taro действительно достигает «полного охвата» основных мини-программ в отрасли. соответствующий код платформы мини-программы. В то же время Taro также стала первой средой разработки в отрасли, которая одновременно поддерживает апплет WeChat, апплет Baidu Smart, апплет ByteDance, апплет Alipay, Quick App и апплет QQ.

taro.jd.com.png

Полная поддержка синтаксиса JSX и React Hooks.

Как среда разработки, использующая синтаксис React и JSX, более ранние версии Taro накладывали строгие синтаксические ограничения как на инструменты проверки компилятора, так и на редактор. В Taro 1.3 разработчики могут дать полную волю своему творчеству и воображению и могут писать произвольно.if-else, вы можете произвольно писать анонимные функции, вы можете поместить JSX в функцию класса, вы также можете поместить его в обычную функцию и так далее. Это можно сделать, если компилятор и ESLint не сообщают об ошибках.

Хотя React Hooks долгое время официально не был стабильным, мы считаем, что эта функция может эффективно упростить режим разработки, повысить эффективность разработки и опыт разработки. Даже если экология и передовой опыт хуков еще не совершенны, мы считаем, что хуки станут основным направлением модели разработки React в будущем и окажут глубокое влияние на будущий состав API других фреймворков. Итак, сначала мы перенесли React Hooks в Taro и написали два небольших примера, чтобы показать, как использовать Hooks в Taro:

V2EX: GitHub.com/nerv JS/таро…

TodoMVC: GitHub.com/nerv JS/таро…

carbon.png

Новый жизненный цикл и контекстный API

В Taro 1.3 мы также реализовали новые функции жизненного цикла React 16.static getDerivedStateFromProps()а такжеgetSnapshotBeforeUpdate(). Когда новая функция жизненного цикла внедряется в компонент класса, старая функция жизненного цикла не будет вызываться, и вызов исходной функции жизненного цикла не будет затронут, если новая функция жизненного цикла не используется. В большинстве случаев мы рекомендуем создавать компоненты класса с новым жизненным циклом, так как это снижает накладные расходы на отрисовку и обновление. Подробнее можно посмотретьСвязанная документация.

Taro 1.3 также реализует React 16createContext,contextTypeа такжеuseContextAPI. Новый контекст передает обновление компонента, объявляя API, что делает межкомпонентное взаимодействие TARO и обмен статусами более интуитивно понятными. В то же время, напримерreact-reduxТакие популярные библиотеки также основаны наContextа такжеHooksРефакторинг, мы также с нетерпением ждем возможности изучить новые шаблоны разработки и проектирования React/Taro с сообществом.

Значительно улучшить производительность и удобство использования H5

Как наиболее востребованная сторона, помимо мини-программ WeChat, мы всегда направляли важные силы разработчиков на сторону H5. В Taro 1.3 мы оптимизировали способ компиляции кода, реализовали минимальное введение ресурсов и введение по требованию, а также уменьшили размер компиляции исходного минимального проекта примерно на 80%. Это, несомненно, огромное улучшение для стороны H5 с плохими условиями сети.

Количество и качество API-интерфейсов на стороне H5 также значительно выросли.В Taro 1.3 добавлено 28 новых API-интерфейсов H5 и решены сотни проблем, связанных с H5.

Если вас больше интересует производительность H5, вы можете прочитать статью:«Верхняя часть решающей боевой производительности - обновление преобразования и оптимизации Taro H5».

Taro Doctor

Мы также черпали вдохновение у Flutter Doctor для разработки Taro Doctor. Как врач, Taro Doctor может диагностировать проблемы с зависимостями проекта, настройками, структурой и спецификацией кода и пытаться найти решения.

Но в отличие от настоящих докторов, Таро Доктору не нужно ждать в очереди или тратить деньги. Вам просто нужно запустить команду в терминале:taro doctor, как на графике:

taro-doctor.png

есть еще

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

Рефакторинг системы параметров компонента (props)

На стороне апплета в Taro 1.0–1.2 мы всегда использовали систему передачи параметров компонентов собственной структуры апплета, но система компонентов апплета не может передавать значение функции или безымянных параметров, и реализация каждого компонента апплета различается. Не то же самое. Чтобы решить эти проблемы, в Taro 1.3 мы реализовали систему передачи параметров набора компонентов. Новая система сделает код, связанный с передачей параметров, более надежным, а также станет основой для поддержки большего количества синтаксиса JSX.

Инструмент командной строки (CLI) Рефакторинг

В Taro 1.3 мы переработали инструмент командной строки для использования TypeScript и постепенно добавили больше тестовых случаев. После рефакторинга мы можем более смело добавлять в CLI новые функции и заменять старые зависимости. В то же время мы также предоставим функции CLI в виде API-интерфейсов, чтобы расширить возможности других инструментов разработки и наших партнеров.

Замена мобильного контейнера

Наш и JingdongARESКомандная работа, поставить оригинальный мобильный контейнерexpoЗаменен глубоко настроенным JDReact. JDReact значительно улучшает управляемость мобильного Taro, позволяя нам прорватьсяexpoОграничено введением собственного мобильного кода, предоставляются настраиваемые функции и API, а производительность и стабильность будут лучше.

Поддержка разработки подключаемых модулей апплета

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

Поддержка «Мини-программы облачной разработки»

"Mini Program Cloud Development" — это очень мощная функция, предоставляемая WeChat Mini Program и Tencent Cloud Team. Это бессерверная служба, которая предоставляет разработчикам три возможности "Cloud Function", "Cloud Database" и "Cloud File Storage", а также инкапсуляцию эти возможности в конкретных интерфейсах могут помочь разработчикам быстро создавать серверные службы для мини-программ WeChat. Чтобы позволить разработчикам Taro использовать возможности «Мини-программы облачной разработки», Taro также добавила поддержку «Мини-программы облачной разработки», предоставила шаблон инициализации для «Мини-программы облачной разработки» и интегрировала мини-программу, связанную с облаком. API-интерфейсы инкапсулированы для удобства использования разработчиками. В то же время «Mini Program Cloud Development» предоставила версию SDK H5, а Taro поддерживает унифицированную инкапсуляцию методов вызова Mini Program и H5, помогая разработчикам быстро создавать бессерверные мультитерминальные приложения.

Обновление совместимости

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

Функции прослушивателя событий в JSX должны иметь область действия

В предыдущей версии Taro функция прослушивателя событий, привязанная к JSX, могла получить доступ к экземпляру компонента без привязки какой-либо области, например

import Taro, { Component, Config } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'

export default class Test extends Component {
  state = {
    hello: 'noclick'
  }
  clickHandler () {
    this.setState({
      hello: 'click'
    })
  }

  render () {
    return (
      <View className={styles.index}>
        <Button onClick={this.clickHandler}>点击</Button>
      </View>
    )
  }
}

В приведенном выше примере<Button />Событие щелчка, привязанное к кнопке, могло нормально выполняться в предыдущей версии, и Taro по умолчанию будетclickHandlerОбласть видимости привязана к текущему экземпляру компонента, но это не соответствует реальной ситуации в React, поэтому в версии 1.3 мы исправили эту проблему, теперь функция прослушивания событий в JSX должна быть привязана к области видимости, иначе будет сообщено об ошибке.

Часть JSX приведенного выше кода можно изменить следующим образом.

render () {
  return (
    <View className={styles.index}>
      <Button onClick={this.clickHandler.bind(this)}>点击</Button>
    </View>
  )
}

или вы также можетеconstructorФункция будет привязана заранее в области видимости,

constructor () {
  this.clickHandlerBind = this.clickHandler.bind(this)
}

render () {
  return (
    <View className={styles.index}>
      <Button onClick={this.clickHandlerBind}>点击</Button>
    </View>
  )
}

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

Временно невозможно использовать компоненты Taro в собственных приложениях.

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

вне кадра

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

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