Реакция на апплет WeChat: идея

внешний интерфейс Апплет WeChat

Компания много чего делала с мини-программами WeChat и находила все больше и больше болевых точек. Компонентизации нет, конфигурация сложная, имена жизненных циклов разные. На его основе есть решение серии vue.Я вот думаю,можно ли разработать React решение? Ведь компаний с React в качестве стека технологий немало, и продажи должны быть очень хорошими.

Я начинаю с определения компонентов. Апплет WeChat — это механизм для пользовательских компонентов, но нельзя использовать наследование. И компонент тоже был разобран и разбит на четыре части. Определения JS, CSS, шаблоны и конфигурация.

js-определение

Апплет WeChat не имеет механизма компонентов, а только предоставляет фабричный метод Component для определения компонентов. Если вы посмотрите на это расплывчато, Page также эквивалентен компоненту, потому что у него также есть методы data и setData. Это эквивалентно состоянию React и setState. Приложение эквивалентно компоненту без сохранения состояния в React, оно может определять объект globalData, доступ к которому имеют все страницы, и некоторые события. Мы обнаружили, что некоторые жизненные циклы приложения, страницы и компонента связаны с маршрутизатором, в отличие от React, который нацелен только на себя.

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

Component({
  behaviors: [], //相当于mixin，不建议使用
  properties: { //相当于propTypes
    myProperty: 1111
    myProperty2: 222 
  },
  data: {}, //  相当于state
  created(){},   //componentWillMount或是getDerivedStateFromProps
  attached(){}, //componentDidMount
  moved(){},   //componentDidUpdate可以模拟它
  detached(){}, //componentWillUnmount
  methods: {//放事件回调及其他方法，已经bind this, 现在也可以不用特意放在这个对象上，这其实是早期抄袭vue的东西
  }
})

У апплета нет shouldComponentUpdate, мы можем сделать некоторые трюки с первым параметром setData, если он равен false, вернуть пустой объект.

this.setData( (function(self){

       //调用原来的shouldComponentUpdate逻辑
      if(shouldComponentUpdate(self.properties, self.data ) ){   
         return newData;
      } else{
         return {};
      }
})(this),function(){
   //调用原来的componentDidUpdate逻辑
   setStateCb && setStateCb.call(this)
   componentDidUpdate && componentDidUpdate.call(this)
})

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

CSS

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

шаблон

Апплет отделяет шаблон компонента, использует классический стиль JSP для встраивания переменных и добавляет wx:if, wx:for к этим инструкциям для реализации обычных операций if и for. Так много людей связывают это с vue. Но он все же очень слаб по сравнению с Vue: во-первых, в нем нет двусторонней привязки (она называется односторонним потоком), во-вторых, при привязке событий можно использовать только имена методов, а функции нельзя генерировать динамически, также нельзя указать функцию. , опять же вперемешку с какими-то непонятными тегами, шаблон, блок, слот. Шаблон — это то, что должно быть веб-компонентом, блок — это то, что находится в бэкэнд-модуле, а слот — это то, что находится в vue.

<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>

Эквивалентно такому коду в React

<div class="wrapper">
 <div>这里是组件的内部节点</div>
  {this.props.children}
</div>

По сравнению с React, у vue нет инструкции ref, он не хочет, чтобы мы получали узлы элементов, но мы можем определить некоторые атрибуты data-*, а затем получить их через this.dataset в прикрепленном хуке компонента. Но, как и в случае с React, мы не можем получить настоящий реквизит. В апплете свойства и данные — это одно и то же

Component({

   data:{a: 1},
   attached: function(){
      console.log(this.data === this.properties) //true
   }
})

это.xxx в jsx, this.props.xxx должен перейти к «this.» унифицированным способом, что нетрудно обработать с помощью babel.

настроить

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

До того, как я начал, в отрасли действительно были похожие решения, такие как weact и таро. В технологической группе, которую я организовал, тоже есть группа друзей, которые этим занимаются.Похоже, что тенденция необратима.Грубые и дрянные античеловеческие штуки вроде маленьких программ должны быть переупакованы, чтобы облегчить нам быстрое продвижение нашего бизнеса. Так же, как sass, меньше для css, машинописный текст для es5.

Категории