Некоторые сравнения и личные мысли о Vue и React (посередине)

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

Блогер использовал фреймворк Vue год назад, а за последние полгода перенес стек технологий на фреймворк React, у него есть базовые знания о Vue и React. Затем блогер подойдёт к Vue и React вместе с вами через верхнюю, среднюю и нижнюю части и вместе обсудит их различия. (Например, если вы используете vue, вы также можете читать, если вам интересно реагировать, и наоборот)

Общий обзор содержания:

Центральный будет в основном изусловный рендеринг,отображать ли,Рендеринг списка,вычисляемое свойство,слушатель,ref,форма,слотСравнение vue и react по восьми аспектам, приглашаем к общению и совместному обсуждению, спасибо за вашу поддержку.

Верхняя ссылка:Некоторые сравнения и личные размышления о Vue и React (часть 1)

9. Условный рендеринг (v-if против &&)

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

vue

Используется в Вьюv-ifИнструкции условно отображают часть контента. отображается только в том случае, если выражение возвращает true,v-ifтакже сv-else-if,v-elseИспользуются вместе для рендеринга в разных условиях, как в jsif elseграмматика.

(1) Основное использование

 <div v-if="showContent">This is content.</div>

data

  data() {
    return {
      showContent: false
    }
  }

когдаshowContentдляfalseне будет рендеритьDOMузел, оставит отметку комментария.

showContentдляtrueбудет отображаться, когдаDOMузел.

(2) v-иначе двойное суждение

v-ifа такжеv-elseПри совместном использованииv-elseдолжен иv-ifрядом, иначе будет сообщено об ошибке.

  <div>
    <div v-if="showContent">This is content.</div>
    <div v-else>Hide content.</div>
  </div>

(3) Множественное суждение V-ELSE-IF

Когда есть несколько условий оценки, вы можете использоватьv-else-if,аналогичныйv-ifизelse-if块,v-elseэлемент должен следовать сразу за бэндомv-ifилиv-else-ifпосле элемента, иначе он не будет распознан.

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

(4) шаблон использует v-if

Кроме того, если вы хотите переключить несколько элементов, в<template>использовать наv-ifЭлементы можно группировать.

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

react

реагировать использует оператор AND&&, тернарный оператор (?:),if elseДля достижения эффекта условного рендеринга.

(1) И оператор

И оператор&&, эффект аналогиченv-if, который отображает элемент справа, когда переменная слева имеет значение true.

 return (
      <div>
        {showItem && <div>This is content.</div>}
      </div>
    );

(2) Тернарный оператор (?:)

Используйте тернарный оператор (?:), чтобы добиться чего-то вродеv-if v-elseЭффект,showItemпеременнаяtrueКогда отображается первый элемент, переменнаяfalseкогда отображается второй элемент.

 return (
      <div>
        {
          showItem ?
            (<div>This is true content.</div>) : (<div>This is false content.</div>)
        }
      </div>
    );

(3) Множественные суждения

При работе с несколькими суждениями вы можете использовать функцию плюсif elseмножественные суждения илиswitch caseформа для достижения чего-то вродеv-if v-else-if v-elseЭффект.

Я.if-elseмножественные суждения

render() {
    const { type } = this.state;
    const toggeleShow = (type) => {
      if (type === 'A') {
        return <div>A</div>;
      } else if (type === 'B') {
        return <div>B</div>;
      } else if (type === 'C') {
        return <div>C</div>;
      } else {
        return null;
      }
    };

    return (
      <div>
        {toggeleShow(type)}
      </div>
    );
  }

II.switch caseмножественные суждения

render () {
    const { type } = this.state;
    const toggeleShow = (type) => {
      switch (type) {
        case 'A':
          return <div>A</div>;
        case 'B':
          return <div>B</div>;
        case 'C':
          return <div>C</div>;
        default:
          return null;
      }
    };

    return (
      <div>
        {toggeleShow(type)}
      </div>
    );
  }

10. Отображать ли (v-show или style+class)

Другой вариант отображения условных элементов —v-show, в ответ вы можете пройтиstyleили переключитьсяclassОтображается форма реализации.

vue

v-showВизуализированные элементы визуализируются и сохраняются в DOM.v-showпросто переключите элементcssАтрибутыdisplay.

 <div v-show="showContent">This is content.</div>

showContentдляfalseчас,styleизdisplayСтоимость свойстваnone.

showContentдляtrueчас,styleизdisplayСтоимость свойстваblock(элемент по умолчаниюdisplayстоимость имущества).

Обратите внимание, что v-show не поддерживает<template>element, а v-else не поддерживается.

v-ifа такжеv-showРезюме сравнения:

• 1)v-ifявляется «настоящим» условным рендерингом, поскольку он гарантирует, что прослушиватели событий и дочерние компоненты внутри условного блока будут правильно уничтожены и перестроены во время перехода.
• 2)v-ifТакже лениво: если условие ложно при начальном рендеринге, ничего не делать - условный блок не начнет рендеринг, пока условие не станет истинным в первый раз.
• 3) Напротив,v-showГораздо проще — элемент всегда будет отображаться независимо от начальных условий и просто переключаться на основе CSS.
• 4) В общем,v-ifимеет более высокие коммутационные накладные расходы, в то время какv-showИмеет более высокие начальные накладные расходы на рендеринг. Поэтому, если вам нужно переключаться очень часто, используйтеv-showлучше; используйте, если условия редко меняются во время выполненияv-ifлучше.

react

Путем модификации в реакцииstyleилиclassреализоватьv-showаналогичный эффект.

путем измененияstyleатрибутdisplayсвойство для переключения, отображать или нет.

<div style={{ display: showItem ? 'block' : 'none' }}>
    This is content.
</div>

Оценка и модификация по переменнымclassДля достижения эффекта переключения также по существу используются переключающие элементыdisplayсвойства для достижения эффекта переключения.

При динамическом изменении стилей элементов в реакции (например, переключениеtab, состояние кнопки выбрано), подходит для использованияclassреализовать.

 const itemClass = showItem ? 'show-item-class' : 'hide-item-class';
    return (
      <div className={itemClass}>
        This is content.
      </div >
    );

classстиль:

.show-item-class {
  display: block;
}
.hide-item-class {
  display: none;
}

11. Рендеринг списка (v-for vs map)

использовать в vuev-forдля отображения списка, используемого в реакцииmapчтобы отобразить список. не важно какv-forещеmapЧтобы отобразить список, все нужно добавитьkeyстоимость(keyОн должен быть уникальным между одноуровневыми узлами), что удобно и быстро для сравнения старого и нового виртуальногоDOMразличия между деревьями.

vue

Можно использовать в vuev-forдля рендеринга массивов, объектов,<template>, компоненты.

(1) Массив рендеринга

При рендеринге массива используйте(item, index) in itemsспециальный синтаксис формы, гдеitemsмассив исходных данных,itemпсевдоним повторяемого элемента массива,indexПредставляет индекс текущего элемента.

  <div>
    <div v-for="(item, index) in items" :key="item.message + index">
      {{item.message}}
    </div>
  </div>

data

 data() {
    return {
      items: [
        {
          message: 'Hello'
        },
        {
          message: 'Welcome'
        }
      ]
    }
  }

(2) Рендеринг объектов

v-forЕго также можно использовать для перебора свойств объекта, используя(value, key, index) in objв видеkeyпредставляющий объектkeyстоимость,valueпредставляющий объектvalueстоимость,indexУказывает текущий индекс.

При обходе объекта используйтеObject.keys()Результат обхода , но нет гарантии, что его результаты согласуются с различными движками JavaScript.

<div v-for="(value, key, index) in obj" :key="key + index">
  {{index}}.{{key}}: {{value}}
</div>

data

  data() {
    return {
      obj: {
        name: 'xiaoming',
        age: 18,
        sex: 'male',
        height: 175
      }
    }
  }

(3) Рендеринг нескольких элементов

существует<template>использовать наv-forдля отображения части контента с несколькими элементами.

существует<template>использовать наv-forПри рендеринге сегментов элементов не допускается привязка значений ключей. потому чтоtemplateне создает фактическихDomузел. Может привязываться к базовым дочерним элементамkeyстоимость.

<div>
    <template v-for="(item, index) in items">
      <div :key="item.message">{{ item.message }}</div>
      <div :key="item.message + index" class="divider"></div>
    </template>
  </div>

data

 data() {
    return {
     items: [
       {
         message: 'hello'
       },
       {
         message: 'world'
       },
       {
         message: 'welcome'
       }
     ]
    }
  },

генерироватьDOM, не создает фактическогоDOMузел.

(4) Отображение списка пользовательских компонентов

В пользовательских компонентах вы можете использоватьv-forОтображение списка пользовательских компонентов черезpropsПередать данные компоненту.

использовать на компонентеv-forчас,keyЭто необходимо.

v-forОтображает список пользовательских компонентов, которые будутitemпройти черезpropsпередается компоненту.

 <my-component 
    v-for="(item, index) in items" 
    :key="item.message + index" 
    :item="item">
  </my-component>

my-componentИспользование компонентовpropsПолучить данные от родительского компонента.

<template>
  <div>{{item.message}}</div>
</template>

<script>
export default {
  props: ['item'],
  data() {
    return { }
  }
}
</script>

react

использовать в реакцииmap()метод для реализации рендеринга списка.

(1) Массив рендеринга

Итерация по каждому элементу в массиве, чтобы получить наборjsxсписок элементов. К каждому элементу массива необходимо добавить уникальныйkeyстоимость.

  render() {
    const items = [
      {
        message: 'hello'
      },
      {
        message: 'world'
      },
      {
        message: 'welcome'
      }
    ];
    const listItems = items.map((item, index) => <div key={item.message + index}>{item.message}</div>);
    return (
      <div>
        {listItems}
      </div>
    );
  }

(2) Рендеринг объектов

Для объектов вы можете использовать методы черезObject.keys()илиObject.entries()для обхода объекта.

  render() {
    const obj = {
      name: 'xiaoming',
      age: 18,
      sex: 'male',
      height: 175
    };
    const renderObj = (obj) => {
      const keys = Object.keys(obj);
      return keys.map((item, index) => <div key={index}>{obj[item]}</div>);
    };
    return (
      <div>
        {renderObj(obj)}
      </div>
    );
  }

(3) Отображение списка пользовательских компонентов

Отображение списка пользовательских компонентов с помощьюvueПодобно , вам нужно добавить в компонентkeyИдентификатор значения.

  render() {
    const items = [
      {
        message: 'hello'
      },
      {
        message: 'world'
      },
      {
        message: 'welcome'
      }
    ];
    const listItems = items.map((item, index) => 
          <ListItem message={item.message} key={item.message + index} />);
    return (
      <div>
        {listItems}
      </div>
    );
  }

12. Вычисляемые свойства (вычисляемые против useMemo+useCallback)

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

vue

Используется в ВьюcomputedДля представления вычисляемых свойств можно определить несколько вычисляемых свойств, а вычисляемые свойства могут вызывать друг друга. Вычисляемые свойства кэшируются на основе их реактивных зависимостей. Они переоцениваются только при изменении соответствующих реактивных зависимостей. Может использоваться непосредственно в vuethis.xxxПолучите вычисляемое свойство напрямую.

(1) Основное использование

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

<div>
    message: <input type="text" v-model="message" />
    <div>{{reversedMessage}}</div>
</div>

script

  data() {
    return {
      message:''
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }

(2) Установщики вычисляемых свойств

Технические свойства по умолчанию толькоgetter, вы также можете использоватьsetter, который запускается при изменении вычисляемого свойстваsetterПерезвоните.

script

data() {
    return {
      message:'',
      info: ''
    }
  },
  computed: {
    reversedMessage: {
      get() { // get回调
        return this.message.split('').reverse().join('')
      },
      set(newValue) { // set回调
        this.info = newValue
      }
    }
  },
  methods: {
    changeMessage(event) {
      // 修改reversedMessage计算属性
      this.reversedMessage = event.target.value;
    }
  }

react

использовать хуки реакцииuseMemoвыражатьmemoizedценность, использованиеuseCallbackвыражатьmemoizedФункция обратного вызова, реализованная с помощью vuecomputedаналогичная функция.

Применимые сценарии: использование подкомпонентовPureComponentилиReact.memo, то вы можете рассмотреть возможность использованияuseMemoа такжеuseCallbackпакет, предоставленный имprops, который в полной мере использует возможности неглубокого сравнения этих компонентов.

(1) использовать памятку

useMemoвернутьmemoizedценность .useMemoБудет зависеть от некоторых значений зависимости и будет пересчитываться только при изменении зависимостиmemoizedстоимость. Если массив зависимостей не предоставлен, useMemo будет вычислять новые значения при каждом рендеринге.useMemoМожет использоваться как средство оптимизации производительности.

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

function NewComponent(props) {
  const { num } = props;
  const [size, setSize] = useState(0);
  // max是useMemo返回的一个memoized的值
  const max = useMemo(() => Math.max(num, size), [num, size]);
  return (<div>
    <input
      type="number"
      value={size}
      onChange={(e) => setSize(e.target.value)} />
    <div>Max {max}</div>
  </div>);
}

(2) использоватьобратный вызов

useCallbackПередайте встроенную функцию обратного вызова и массив зависимостей в качестве аргументовuseCallback, он вернет функцию обратного вызоваmemoizedверсии функция обратного вызова будет обновляться только при изменении зависимости. Когда вы передаете обратные вызовы для оптимизации и используете ссылочное равенство, чтобы избежать ненужного рендеринга (например,shouldComponentUpdateБудет очень полезно, когда дочерний компонент .

function NewComponent(props) {
  const [message, setMessage] = useState('hello world.');
  const handleChange = useCallback((value) => {
    setMessage(value);
  }, []);
  return (<div>
    <input
      type="number"
      value={message}
      onChange={(e) => handleChange(e.target.value)} />
    <div>{message}</div>
  </div>);
}

13. Слушатели (watch vs getDerivedStateFromProps + componentDidUpdate)

Слушатель обращается кpropsили данные компонента (dataилиstate) для выполнения некоторых асинхронных операций или операций с данными.

vue

В основном через vuewatchмониторprops,data,computed(вычисляемое свойство) изменения, выполнять асинхронные или дорогостоящие операции.

подProjectManageкомпоненты проходятwatchмониторprojectId propизменения для получения соответствующей информации о проекте.

export default {
  name: "ProjectManage",
  props: ["projectId"],
  data() {
    return {
      projectInfo: null
    };
  },
  watch: {
    projectId(newVaue, oldValue) {
      if (newVaue !== oldValue) {
        this.getProject(newValue);
      }
    }
  },
  methods: {
    getProject(projectId) {
      projectApi
        .getProject(projectId)
        .then(res => {
          this.projectInfo = res.data;
        })
        .catch(err => {
          this.$message({
            type: "error",
            message: err.message
          });
        });
    }
  }
};

react

перейти в реакциюstatic getDerivedStateFromProps()а такжеcomponentDidUpdate()Реализовать функцию слушателя.

(1)static getDerivedStateFromProps()

getDerivedStateFromPropsбудет звонитьrenderЭтот метод вызывается раньше и будет вызываться как при первоначальном монтировании, так и при последующих обновлениях. Он должен вернуть объект для обновленияstate, если вернутьсяnullничего не обновляется.

оgetDerivedStateFromPropsЕсть 2 момента, которые нужно объяснить:

• 1) Либоpropsизменить, выполнитьsetStateилиforceUpdateДействия вызывают этот метод перед каждым рендерингом.
• 2) КогдаstateСтоимость в любой момент времени зависит отpropsЭтот метод применяется при .

class NewComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      info: ''
    }
  }
  static getDerivedStateFromProps(nextProps, prevState) {
    // state中的info根据props中的info保持同步
    if (nextProps.info !== prevState.info) {
      return {
        info: nextProps.info
      }
    }
    return null;
  }
  render() {
    const { info } = this.state;
    return <div>{info}</div>
  }
}

(2)componentDidUpdate()

componentDidUpdate()Метод вызывается после обновления компонента. Этот метод не выполняется при первом рендеринге. Когда компонент обновится, это можно сделать здесьDOM,воплощать в жизньsetStateИли выполните операцию асинхронного запроса.

componentDidUpdate(prevProps, prevState, snapshot)

оcomponentDidUpdateЕсть 4 момента, которые нужно объяснить:

• 1)componentDidUpdate()третий параметрsnapshotПараметры получены изgetSnapshotBeforeUpdate()Возвращаемое значение жизненного цикла. Если не реализованоgetSnapshotBeforeUpdate(), значение этого параметра равноundefined.
• 2) может бытьcomponentDidUpdate()позвонить прямо вsetState(), но он должен быть заключен в условный оператор, иначе это приведет к бесконечному циклу.
• 3) может бытьcomponentDidUpdate()до и после обновленияpropsСравните, выполните асинхронную операцию.
• 4) ЕслиshouldComponentUpdate()Возвращаемое значениеfalse, он не будет звонитьcomponentDidUpdate().

подNewComponentкомпонент вcomponentDidUpdate()суждение

class NewComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      projectInfo: null
    }
  }
  getProject = (projectId) => {
    projectApi
      .getProject(projectId)
      .then(res => {
        this.projectInfo = res.data;
      })
      .catch(err => {
        message.error(err.message);
      });
  }
  componentDidUpdate(prevProps) {
    if (this.props.projectId !== prevProps.projectId) {
      this.getProject(this.props.projectId);
    }
  }
  render() {
    const { projectInfo } = this.state;
    return <React.Fragment>
      <div>{projectInfo.name}</div>
      <div>{projectInfo.detail}</div>
      </React.Fragment>
  }
}

14.ref

refИспользуется для регистрации справочной информации для элементов или подкомпонентов, что позволяет нам получить доступ к подкомпонентам или подузлам.

refЧасто используется для:

• Управляйте фокусом, выделением текста или воспроизведением мультимедиа.
• Запустить принудительную анимацию.

vue

Установив компонент или дочерний элементrefэтоattributeНазначьте ссылку ID дочернему компоненту или дочернему элементу.

$refsВступают в силу только после рендеринга компонента, и они не являются реактивными. Это используется только как «аварийный люк» для прямого управления дочерними компонентами — вам следует избегать доступа к ним в шаблонах или вычисляемых свойствах.$refs.

(1) Ссылка на дочерний элемент ref

ссылка на дочерний элементref

 <div>
    <input type="text" v-model="message" ref="inputMessage"  />
  </div>

Сделайте так, чтобы поле ввода автоматически получало фокус после загрузки

mounted() {
  this.$refs.inputMessage.focus();
}

(2) Ссылки на подкомпоненты ref

ссылка на дочерний компонентrefОбычно используется для родительских компонентов для использования дочерних компонентов.

Валидация общей формы проверяется таким образом.

<template>
  <div>
    <el-form ref="createForm" label-width="80px" :model="form" :rules="rules">
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
    </el-form>
    <el-button @click="handleSubmit">提交</el-button>
  </div>
</template>

<script>
export default {
  name: 'CreateForm',
  data() {
    return {
      form: {
        name: '',
        email: ''
      },
      rules: {
        name: [{required: true, message: '名称不能为空', trigger: 'blur'}],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
        ] 
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.createForm.validate((valid) => {
        console.log(valid);
      })
    }
  }
}
</script>

react

В реакте это не так, как прямо в вьюrefПередайте значение строкового типа,classкомпоненты проходятReact.createRefсвязыватьrefсвойства (после React v16.0), функциональные компоненты передаютсяuseRefсвязыватьrefсвойства, вы также можете использоватьReact.forwardRefдля пересылкиrefсвойства дочерним компонентам.

(1) ссылка на привязку компонента класса

пройти черезReact.createRefгенерируется в конструктореref, который привязан кinputНа элемент он автоматически фокусируется после загрузки.

class NewComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'hello world'
    };
    this.inputRef = React.createRef();
  }
  componentDidMount() {
    this.inputRef.current.focus();
  }
  render() {
    const { message } = this.state;
    return (<div>
      <input
        type="number"
        ref={this.inputRef}
      />
      <div>{message}</div>
    </div>);
  }
}

(2) Ссылка на привязку функционального компонента

Функциональные компоненты могут использоватьuseRefсвязыватьrefАтрибуты.useRefПеременная возвратаrefобъект, который.currentСвойства инициализируются переданными параметрами (initialValue). вернутьrefОбъекты остаются неизменными в течение всего срока службы компонента.

function NewComponent() {
  const [message, setMessage] = useState('hello world.');
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  return (<div>
    <input type="number" ref={inputRef} />
    <div>{message}</div>
  </div>);
}

(3) React.forwardRef пересылает ссылку дочерним компонентам

React.forwardRefсоздаст компонент React, который может приниматьrefСвойства его компонентов передаются другому компоненту дерева.

Этот метод встречается нечасто, но особенно полезен в двух случаях:

• ВпередrefsприбытьDOMкомпоненты
• Переадресация в компонентах более высокого порядкаrefs

Родительский компонент передается напрямуюrefатрибут для дочерних компонентовNewComponent.

function Parent() {
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  return <div>
     <NewComponent ref={inputRef}><h2>This is refs.</h2></NewComponent>
  </div>;
}

Использование подкомпонентовReact.forwardRefПринимает функцию рендеринга в качестве параметра и фокусируется на родительском компоненте после загрузкиinputПоле ввода.

const NewComponent = React.forwardRef((props, ref) => (<div>
  <input type="number" ref={ref} />
  <div>{props.children}</div>
</div>));

15. Формы (v-модель против ценности)

Для форм используйте в vuev-modelРеализовать двустороннюю привязку данных к компонентам формы путем привязки компонентов формы в реакции.valueСвойства управляют данными формы в виде контролируемых компонентов.

vue

v-modelИнструкции в форме<input>,<textarea>а также<select>Создайте двустороннюю привязку данных к элементу. Он автоматически выбирает правильный метод для обновления элемента в зависимости от типа элемента управления.v-modelПо сути, не более чем синтаксический сахар.

v-modelВнутренне используйте разные свойства и генерируйте разные события для разных элементов ввода:

• textа такжеtextareaиспользование элементаvalueсвойства иinputмероприятие;
• checkboxа такжеradioиспользоватьcheckedсвойства иchangeмероприятие;
• selectполе будетvalueтак какpropи воляchangeкак событие.

(1) Основное использование

Ⅰ Текст

inputПривязать к полю вводаv-modelпривязка свойстваmsg, при измененииinputПри вводе значенияmsgЗначения, введенные пользователем, автоматически синхронизируются.

 <div>
  <input v-model="msg" />
</div>

v-modelНаписание эквивалентно:valueа также@inputкомбинация,:valueпривязать входное значение,@inputУказывает на получение модификации входного событияmsgЗначение входного значения, таким образом реализуя двустороннюю привязку.

<div>
  <input :value="msg" @input="e => (msg = e.target.value)" />
</div>

Ⅱ. Флажок

Один флажок, связанный с логическим значением

<div>
  <input type="checkbox" v-model="checked" />
  <label for="checkbox">{{ checked }}</label>
</div>

Несколько флажков, привязанных к массиву

<div>
    <input type="checkbox" id="apple" value="apple" v-model="selectedFruits" />
    <label for="jack">apple</label>
    <input
      type="checkbox"
      id="banana"
      value="banana"
      v-model="selectedFruits"
    />
    <label for="john">banana</label>
    <input type="checkbox" id="mango" value="mango" v-model="selectedFruits" />
    <label for="mango">mango</label>
    <div>Selected fruits: {{ selectedFruits }}</div>
  </div>

data

 data() {
    return {
      selectedFruits: []
    };
  }

Ⅲ Поле выбора

1) При выборе магнитолы привязываем струну

<div>
  <select v-model="selected">
    <option
      v-for="option in options"
      :value="option.value"
      :key="option.value"
    >
      {{ option.text }}
    </option>
  </select>
  <div>Selected: {{ selected }}</div>
</div>

data

data() {
  return {
    selected: "A",
    options: [
      { text: "One", value: "A" },
      { text: "Two", value: "B" },
      { text: "Three", value: "C" }
    ]
  };
}

2) Когда поле выбора выбрано несколькими, оно привязано к массиву

<div>
  <select v-model="selected" multiple>
    <option
      v-for="option in options"
      :value="option.value"
      :key="option.value"
    >
      {{ option.text }}
    </option>
  </select>
  <div>Selected: {{ selected }}</div>
</div>

data

 data() {
  return {
    selected: ["A"], //多选时绑定的是数组
    options: [
      { text: "One", value: "A" },
      { text: "Two", value: "B" },
      { text: "Three", value: "C" }
    ]
  };
}

#### (2) модификатор Vue дляv-modelрасширенный.lazy,.number,.trimУлучшения модификатора.

Ⅰ.ленивый

По умолчанию,v-modelкаждый разinputСинхронизируйте значение поля ввода с данными после запуска события. Добавлен.lazyмодификатор, который превращается вchangeСобытия синхронизируются.

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

Ⅱ.число

.numberМодификаторы могут автоматически преобразовывать пользовательский ввод в числовые типы, что особенно полезно при работе с числовыми элементами формы.

 <input type="number" v-model.number="num" />

Ⅲ.трим

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

 <input v-model.trim="msg" />

(3) Использование пользовательских компонентовv-model

на компонентеv-modelПо умолчанию будет использоватьсяvalueизpropи назвалinputмероприятие.

InputMessageсвязыватьv-modelзначениеmsg

  <InputMessage v-model="msg" />

InputMessageкомпоненты проходятvalue propsполучить значение,emit inputСобытие передается родительскому компоненту, и родительский компонент модифицируетсяmsgценность .

<template>
  <input v-model="message" @input="$emit('input', $event.target.value)" />
</template>

<script>
export default {
  name: "InputMessage",
  props: ["value"],
  data() {
    return {
      message: this.value
    };
  }
};

(4) Компоненты формы (файл и т. д.), управляемые v-model, не могут использоваться.

для чего-то вроде<input type="file" />Этот тип компонента формы нельзя использоватьv-modelУправлять данными компонентов, что можно сделать с помощьюrefsУправляйте данными компонентов формы, что соответствует неконтролируемым компонентам в реакции.

<template>
  <div>
    <input type="file" ref="file" @change="fileChange" />
  </div>
</template>

<script>
export default {
  name: "InputFile",
  data() {
    return {};
  },
  methods: {
    fileChange() {
      const file = this.$refs.file.files[0];
      console.log(file);
    }
  }
};
</script>

react

В реакции элементы формы (<input> <select> <checkbox>) обычно поддерживают свои собственныеstate,Будуstateназначить наvalueсвойств и на основе пользовательского ввода черезsetState()возобновитьstate, элементы формы, управляемые таким образом, называются «управляемыми компонентами».

(1) Контролируемые компоненты

В контролируемых компонентахstateКак «единственный источник данных» компонент также контролирует, что происходит с формой во время действия пользователя.

class CreateForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ''
    }
  }

  nameChange = (event) => { // 接收事件作为参数
   this.setState({
     name: event.target.value
   });
  }

  render() {
    const { name } = this.state; 
    return (
    <div>
      <input value={name} onChange={this.nameChange} />
      <div> name: {name} </div>
    </div>)
  }
}

(2) Неконтролируемые компоненты

В ответ, потому что не может использоватьstateКомпоненты формы, управляемые формой, называются неконтролируемыми компонентами, и значение неконтролируемых компонентов не может пройти контроль кода, данные формы доставляются.DOMузел для обработки. Для неконтролируемых компонентов вы можете использоватьrefотDOMПолучить данные формы из узла.

<input type="file" />всегда является неуправляемым компонентом, созданнымrefдля получения файловых данных в виде .

class CreateForm extends React.Component {
  constructor(props) {
    super(props);
    this.fileRef = React.createRef(null);
  }

  fileChange = (event) => {
    event.preventDefault();
    const file = this.fileRef.current.files[0];
    console.log(file)
  }

  render() {
    return (
    <div>
      <input type="file" ref={this.fileRef} onChange={this.fileChange} />
    </div>)
  }
}

16. Слоты (slot vs Render Props+this.props.children)

И vue, и react реализуют функцию «слот» (распределение контента), и vue в основном используетslotРеализовать функцию слота, которая передается в реакцииthis.props.childrenа такжеRender propsРеализуйте функцию слота, аналогичную той, что используется в Vue.

vue

Пройти во вью<slot>Реализуйте функции слотов, включая слоты по умолчанию, именованные слоты и слоты с заданной областью действия.

(1) Слот по умолчанию

Используйте слот по умолчанию<slot></slot>Зарезервируйте «заполнитель» для содержимого дистрибутива внутри компонента, а начальный и конечный теги компонента могут содержать любой код, например html или другие компоненты.

Есть 2 примечания о слоте по умолчанию:

(1) Если слот не используется, контент, вставленный в компонент, не будет отображаться.
(2) Слот можно настроить с резервным содержимым, которое отображается, когда ничего не вставлено.

Компоненты, использующие слоты по умолчанию:

<template>
  <div>
    <h2>Slot：</h2>
     <slot>Default content.</slot> // 使用slot预留插槽占位，slot中的内容作为后备内容
  </div>
</template>

<script>
export default {
  name: "SlotComponent",
  data() {
    return {};
  }
};
</script>

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

<slot-component>
  <h2>This is slot component.</h2>
</slot-component>

Окончательное содержимое слота будет вставлено в компонент<slot></slot>Занятая должность.

  <div>
    <h2>Slot：</h2>
    <h2>This is slot component.</h2>
  </div>

когда<slot-component>Если содержимое слота не добавлено, отображается содержимое слота по умолчанию.

<div>
    <h2>Slot：</h2>
    Default content.
  </div>

(2) Именованный слот

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

слот по умолчаниюnameдаdefault.

Предоставляя контент в именованные слоты, мы можем<template>использовать на элементахv-slotинструктаж и сv-slotПараметр предоставляется в виде своего имени, вставляя содержимое в соответствующий слот.

v-slot:также может быть сокращено как#,Напримерv-slot:footerможно переписать как#footer.

Компоненты слотаslot-componentимеютheader footerДва именованных слота и один слот по умолчанию.

<template>
  <div>
    <header>
      <slot name="header">
        Header content.
      </slot>
    </header>
    <main>
      <slot>
        Main content.
      </slot>
    </main>
    <footer>
      <slot name="footer">
        Footer content.
      </slot>
    </footer>
  </div>
</template>

Вставьте содержимое в слоты по отдельности:

<slot-component>
  <template v-slot:header>
    <div>This is header content.</div>
  </template>
  <template>
    <div>This is main content.</div>
  </template>
  <template #footer>
    <div>This is footer content.</div>
  </template>
</slot-component>

Окончательный html будет отображаться как:

<div>
  <header>
    <div>This is header content.</div>
  </header>
  <main>
    <div>This is main content.</div>
  </main>
  <footer>
    <div>This is footer content.</div>
  </footer>
</div>

(3) Слот для прицела

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

Слоты с заданной областью действия должны быть в<slot>Привязать к элементуattribute, который называется слотомprop. В родительской области вы можете использовать значениеv-slotчтобы определить слоты, которые мы предоставляемpropимя.

Компоненты слота

<template>
  <div>
    <header>
      <slot name="header">
        Header content.
      </slot>
    </header>
    <main>
      <slot :person="person">
        {{ person.name }}
      </slot>
    </main>
  </div>
</template>

<script>
export default {
  name: "SlotComponent",
  data() {
    return {
      person: {
        name: "xiaoming",
        age: 14
      }
    };
  },
  methods: {}
};
</script>

Область родительского компонента будет содержать все слотыpropобъект с именемslotProps, или используйте любое имя, которое вам нравится.

 <slot-component>
  <template slot="header">
    <div>This is header content.</div>
  </template>
  // 使用带值的`v-slot`来定义插槽`prop`的名字
  <template v-slot:default="slotProps"> 
    <div>{{ slotProps.person.name }}</div>
    <div>{{ slotProps.person.age }}</div>
  </template>
</slot-component>

Окончательный html будет отображаться как:

<div>
  <header>
    <div>This is header content.</div>
  </header>
  <main>
    <div>xiaoming</div>
    <div>14</div>
  </main>
</div>

react

перейти в реакциюthis.props.childrenа такжеRender propsРеализуйте функцию слота, аналогичную той, что используется в Vue.

(1) это.реквизиты.дети

Каждый компонент может бытьthis.props.childrenПолучите содержимое между пуском и конечным тегом содержащего компонента, это похоже на слот по умолчанию в Vue.

существуетclassиспользуемые компонентыthis.props.children,существуетfunctionиспользуемые компонентыprops.children.classИспользование компонентовthis.props.childrenПолучите содержимое дочернего элемента.

class NewComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <div>{this.props.children}</div>
  }
}

functionИспользование компонентовprops.childrenПолучите содержимое дочернего элемента.

function NewComponent(props) {
  return <div>>{props.children}</div>
}

родительский компонент используетNewComponentкомпоненты

 <NewComponent>
   <h2>This is new component header.</h2>
   <div>
     This is new component content.
   </div>
 </NewComponent>

Окончательный html будет отображаться как:

<div>
  <h2>This is new component header.</h2>
  <div>This is new component content.</div>
</div>

(2) Рендеринг реквизита

render propОтносится к способу использования функции значения между компонентами React.propМетоды обмена кодом.render propэто функция, которая сообщает компоненту, что отображатьprop.

такие как наши обычно используемыеreact-router-domсерединаRouteизcomponent propиспользуя типичныйrender propПрименение.

<Router history={browserHistory}>
    <Route path="/" component={Index}> // component props接收具体的组件
      <IndexRoute component={HomePage} />
      <Route path="/users" component={Users} />
    </Route>
  </Router>

через несколькоrender propВы можете получить функцию, аналогичную именованному слоту в Vue.

NewComponentОпределенныйheader,main,footer prop.

class NewComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { header, main, footer, children } = this.props;
    return (<div>
              <header>
                {header || (<div>Header content.</div>)}
              </header>
              <main>
                {main || (<div>Main content.</div>)}
              </main>
              {children}
              <footer>
                {footer || (<div>Footer content.</div>)}
              </footer>
            </div>);
  }
}

родительский компонент в дочерний компонентrender prop.

 <NewComponent 
    header={<div>This is header content.</div>}
    content={<div>This is main content.</div>}
    footer={<div>This is footer content.</div>}>
    <div>
      This is new component children.
    </div>
</NewComponent>

Окончательный html будет отображаться как

<div>
  <header>
    <div>This is header content.</div>
  </header>
  <main>
    <div>This is main content.</div>
  </main>
  <div>This is new component children.</div>
  <footer>
    <div>This is footer content.</div>
  </footer>
</div>

Эпилог

Выше приведены некоторые сравнения блогера между react и vue, а также средняя часть личного мышления. Если вы чувствуете, что что-то приобрели, вы можете обратить на это внимание и поставить лайк. Кодировать слова непросто. Спасибо большое.