Правильная поза для использования JSX в Vue (с преимуществами)

Осанка важна, в конце есть преимущества

vue-antd-uiПосле того, как в течение некоторого времени был открыт исходный код, я получил некоторые отзывы, особенно после запуска компонента Form, многие пользователи были сбиты с толку и не привыкли к использованию JSX.По этой причине я расскажу об использовании и мерах предосторожности Vue JSX.

Функцию автоматического сбора и проверки компонента Form необходимо использовать под JSX.Конечно, если вам не нужен автоматический сбор и проверка, вы все равно можете использовать шаблон

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

Студенты, которые использовали React, конечно, знакомы с JSX, но все же есть некоторые различия между написанием JSX Vue и React.

Все данные, передаваемые между родителем и дочерним элементом в React, являются свойствами, то есть все данные монтируются вpropsвниз (стиль, className, дочерние элементы, значение, onChange и т. д.).

Vue не тот случай, есть только три типа свойств: свойства компонентаprops, обычные html-атрибутыattrs, Дом недвижимостьdomProps.

Далее мы подробно объясним их различия на примере:

Код этой статьи можно найти по адресуcodesandboxПросмотр пробега

const ButtonCounter = {
  name: "button-counter",
  props: ["count"],
  methods: {
    onClick() {
      this.$emit("change", this.count + 1);
    }
  },
  render() {
    return (
      <button onClick={this.onClick}>You clicked me {this.count} times.</button>
    );
  }
};

export default {
  name: "button-counter-container",
  data() {
    return {
      count: 0
    };
  },
  methods: {
    onChange(val) {
      this.count = val;
    }
  },
  render() {
    const { count, onChange } = this;
    return (
      <div>
        <ButtonCounter
          style={{ marginTop: "10px" }}
          count={count}
          type="button"
          onChange={onChange}
        />
        <ButtonCounter
          style={{ marginTop: "10px" }}
          count={count}
          type="button"
          domPropsInnerHTML={`hello ${this.count}.`}
          onChange={onChange}
        />
      </div>
    );
  }
};

свойства компонентаprops: относится к свойствам, объявленным компонентом, т.е. объявленным в приведенном выше примере.props: ['count'].

Нормальные атрибуты HTMLattrs: __ относится к необъявленному свойству компонента, т.е. в приведенном выше примереtype="button", это свойство по умолчанию будет напрямую монтироваться в корневой узел компонента.Если вам не нужно монтировать его в корневой узел, вы можете объявитьinheritAttrs: false.

Дом недвижимостиdomProps: относится к свойству Dom, как в приведенном выше примере.innerHTML, который переопределяет внутреннююchildren, мы вообще редко используем такие свойства.

Существует также два типа свойств события:on nativeOn

Итак, вопрос в том, как компоненты различают различные атрибуты?

Ответ: Обычные правила... 😶,babel-plugin-transform-vue-jsxПлагин будет «классифицировать» атрибуты, записанные в компоненте, на этапе компиляции посредством регулярного сопоставления. onXXX считаются событиями, nativeOnXXX — собственными событиями, а domPropsXXX — свойствами Dom.

class,staticClass,style,key,ref,refInFor,slot,scopedSlotsОни считаются атрибутами верхнего уровня. Что касается свойств, объявленных нашими атрибутами, а также атрибутов атрибута html, префикс не требуется. Плагин единообразно классифицирует их по атрибуту attrs, а затем определит атрибуцию атрибута в время выполнения в зависимости от того, объявлено ли оно в реквизитах (т.е. принадлежитpropsвсе ещеattrs).

На этапе компиляции она выделяется по обычным правилам, ведь она не очень строгая, так что же это за проблемы по вышеприведенным правилам классификации?

Во-первых, классификация атрибутов — это классификация, выполняемая на этапе компиляции, так как же классифицировать динамические атрибуты?

В React все свойства являются свойствами верхнего уровня, используйте напрямую{...props}Это нормально, но во Vue нужно указать категорию, к которой относится свойство, например динамическое значение свойства и изменение события, можно передать следующим образом (расширенное свойство):

const dynamicProps = {
  props: {},
  on: {},
}
if(haValue) dynamicProps.props.value = value
if(hasChange) dynamicProps.on.change = onChange
<Dynamic {...dynamicProps} />

Конечно, вы можете смешивать и сочетать:

<Dynamic {...dynamicProps} style="color: red"/>

Не слишком радуйтесь.Если вы не использовали Vue JSX в деталях, не рекомендуется использовать гибридный метод, потому что Vue объединит свои атрибуты.Что касается правил слияния, официального документа в деталях нет. .Есть документ в документе.ПримерЯ даю еще один пример этого:

const dynamicProps2 = { on: { change: onChange2 } };
<Dynamic
  {...{ on: { change: onChange1 } }}
  {...dynamicProps2}
  onChange={onChange3}
/>

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

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

Во-вторых, что если объявленный атрибут onXXX?

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

<div>
    <Dynamic value="获取到value，然而并不能获取到onXXX" onXXX="😶" />
    <Dynamic {...{ props: { onXXX: "获取到onXXX，但不建议使用" } }} />
</div>

В-третьих, как быть с реквизитом функциональных компонентов?

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

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

propsиattrsМежду ними существует очень тонкая связь.В обычных компонентах до тех пор, пока явно объявленные свойства будут разделены наpropsВ классификации остальные вattrsсередина. Для функциональных компонентов просто опуститеpropsВариант, вне зависимости от того, четко классифицирован он или нет при передаче параметров, окончательныйcontext.propsВсе атрибуты получены.Если вам нужно получить четкую классификацию, вы можете перейти кcontext.dataПосмотреть ниже. В заключение в функциональных компонентах рекомендуется опуститьpropsопции.

В-четвертых, инструкции все еще доступны?

К сожалению, большинство директив нельзя использовать в JSX.v-showподдерживается. Большинство инструкций можно заменить выражениями в JSX, такими как: условный оператор (?:) вместоv-if,array.mapальтернативаv-forДля пользовательских инструкций вы можете использовать следующие методы:

const directives = [
  { name: 'my-dir', value: 123, modifiers: { abc: true } }
]

return <div {...{ directives }}/>

Чтобы узнать больше о Vue JSX, вы можете проверить официальную документацию.

Суммировать:

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

заключительный отчетvue-antd-uiВ настоящее время компонентов 48. По сравнению с реактивной версией не разработаны List, TreeSelect, Metion и Carousel.За прошедший период времени мы улучшили модульное тестирование компонентов, и коэффициент покрытия тестами составляет 83%. Количество тестов — 610, и следующий тест по-прежнему остается нашей основной работой.

Качество всегда важнее количества.

Добро пожаловатьstar, добро пожаловать пр.

Ссылка на благосостояние:

Книги React, в переводе которых я участвовал (React Quickly, китайское название: быстро начать программирование на React) скоро будут перечислены, есть 4 книги с образцами, чтобы поблагодарить вас за вашу поддержку.vue-antd-ui, пользователи могут перейти кissueПожалуйста, отправьте личное сообщение на мой адрес после ответа в соответствии со спецификациями (необходимы скриншоты), почтовые расходы будут оплачиваться вами, в порядке очереди, количество ограничено, пожалуйста, поймите.

Относительно простая серия, эта книга больше подходит для начинающих.Если вы разработчик Vue и хотите быстро изучить React и сопутствующие технологии (Redux, GraphQL, Jest и т. д.), я думаю, что эта книга должна быть лучшим выбором .