Учебник по React для пользователей Vue, вы это заслужили (2)

я писал на прошлой неделеУчебник по React для пользователей Vue, вы это заслужили, был хорошо принят друзьями, сегодняшняя статья — вторая статья в этой серии. Эти годы9月18日инцидент 18 сентября89Юбилей, и в этот день,Vue3.0Официальная версия выпущена. Я уверен, что многие из вас видели этоVue3.0Есть много статей по теме. Сегодняшняя статья будетVue2,Vue3,ReactНекоторые из обычаев сравниваются, что удобно для изучения друзьями.

данные`data`,существует`react`средняя ставка`state`

знакомыйvueприятель должен быть правVueсерединаdataВо всяком случае, я не буду чувствовать себя незнакомым, я пишу каждый деньBugиспользовать в любое время, но дляdataНапример, вVue2.0,Vue3.0,ReactИспользование отличается, мы приведем пример ниже

`Vue2.0`использование в

Следующий код является относительно простымVue2.0изdataПрименение

<template>
  <div>{{ name }}</div>
</template>
<script>
export default {
  data() {
    return {
      name: '子君',
      gzh: '前端有的玩'
    }
  }
}
</script>

Из вышеуказанного кода мы можем увидетьdataявляется функцией, а затем функция возвращает объект, так почемуdataЭто функция? Например, мы иногдаApp.vueвидно в файлеdataНе в случае с функциями.

<template>  
	<div id="app">
    <router-view />
  </div>
</template>
<script>
export default {
  data:{
    name: '子君',
    sex: '男'
  }
}
</script>

Так почему же мы должны поставитьdataКак насчет объявления его как функции?VueОфициальный сайт объясняет это так: когдакомпонентыопределено,dataДолжна быть объявлена как функция, возвращающая исходный объект данных, поскольку компонент может использоваться для создания нескольких экземпляров. еслиdataпо-прежнему является чистым объектом, то все экземпляры будутобщая ссылкаТот же объект данных! путем предоставленияdataфункция, каждый раз, когда создается новый экземпляр, мы можем вызыватьdataфункция, которая возвращает новую копию объекта данных исходных данных.

а такжеApp.vueмогуdataобъявлен как обычный объект, потому что вся системаApp.vueОн будет использоваться только один раз, поэтому такой проблемы нет.

`Vue3`использование в

существуетVue3, мы еще можемVue2использовать таким образомdata,КонечноVue3предоставляет новыеComposition API, в последующих статьях, если нет особого указания, упоминаемVue3По умолчанию это означает использованиеComposition API.

существуетComposition APIОтзывчивыйAPI, соответственноrefа такжеreactive, через эти дваAPIМожет генерировать отзывчивые данные

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

<template>
  <div class="home">
    <div>姓名:{{ state.name }}</div>
    <div>公众号:{{ state.gzh }}</div>
    <div>统计:{{ count }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";

export default defineComponent({
  name: "Home",
  setup() {
    const state = reactive({
      name: "子君",
      gzh: "前端有的玩"
    });
    const count = ref(0);
    return {
      state,
      count
    };
  }
});
</script>

Реагирование на изменения данных

существуетVue2.0, мы модифицируемdataобычно используется методthis.name = '张三'Этот способ присвоения, но дляComposition APIпотому что он обеспечивает дваapi, поэтому использование немного отличается

<template>
  <div class="home" @click="handleClick">
    <div>姓名:{{ state.name }}</div>
    <div>公众号:{{ state.gzh }}</div>
    <div>统计:{{ count }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";

export default defineComponent({
  setup() {
    const state = reactive({
      name: "子君",
      gzh: "前端有的玩"
    });
    
    const count = ref(0);
    
    function handleClick() {
      state.name = "张三";
      count.value++;
    }
    
    return {
      state,
      count,
      handleClick
    };
  }
});
</script>

Как показано в коде выше:

дляreactiveзаявленные данные

дляreactive, мы можем пройтиstate.nameчтобы получить данные, затем перейдитеstate.name='张三'изменить данные
дляrefзаявленные данные

дляrefзаявленные данные,refПринимает значение параметра и возвращает реактивный и изменяемый объект ссылки. Объекты ref имеют одно свойство, указывающее на внутреннее значение.value. Итак, мы получаем кодrefДанные объекта необходимо использоватьcount.valueКстати, способ изменения значения также должен пройтиcount.value++Путь.

Но тут есть особый моментtemplate,refОбъект будет автоматически развернут, что означает, что для<div>统计:{{ count }}</div>, который можно использовать прямо в кодеcount, вместо того, чтобы быть записанным какcount.value,Vueраспаковывает какcount.value.

`React`использование в

React16.8недавно добавленныйHookфункция, многие команды уже использовали ее в больших масштабах, поэтому содержание этой статьи в большей степени основано наHookосновной.

существуетVue3.0предоставлено вComposition API, на самом деле это иReactизhookИспользование очень похоже, далее мы напишем то, что написали вышеVue3.0Код изменен наReactВерсия

import React, { useState } from 'react'

export default function() {
  // useState传入要初始化的状态数据，然后会返回一个数组
  // 数组第一项为声明的数据，而第二个参数是一个方法，用于调用
  // 修改数据
 const [name, setName] =  useState('子君')
 const [gzh] = useState('前端有的玩')

 function handleClick() {
   // 在react修改数据需要调用useState返回的方法
   setName('张三')
 }

  return (
    <div onClick={handleClick}>
      <div>姓名：{name}</div>
      <div>公众号: {gzh}</div>
    </div>
  );
}

В этом коде мы используемuseStateобъявилstateПеременная,useStateВозвращаемое значение представляет собой массив, а затем мы получаем две переменные посредством деструктуризации массива, const [name, setName] = useState('子君'), вnameсоответствующий заявлениюstateпеременная иsetNameэто функция, которая вызываетsetNameВы можете изменить значение переменной, напримерsetName('张三'),В этот моментnameзначение станет张三

слушатель`watch`, нет ничего плохого в том, чтобы следить за вами

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

`Vue2.0`правописание в

существуетvue2.0середина,watchСуществует два широко используемых метода записи.Ниже мы используем различные методы записи для реализации вышеуказанных функций.

Регулярная реализация

<template>
  <div>
    <div>
      <span>搜索</span>
      <input v-model="searchValue" />
    </div>
    <!--列表，代码省略-->
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchValue: ''
    }
  },
  watch: {
    // 在值发生变化之后，重新加载数据
    searchValue(newValue, oldValue) {
      // 判断搜索
      if (newValue !== oldValue) {
        // 在这里处理搜索逻辑
      }
    }
  }
}
</script>

использовать$watchвыполнить
```
<template>
  <div>
    <div>
      <span>搜索</span>
      <input v-model="searchValue" />
    </div>
    
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchValue: ''
    }
  },
  created() {
    // $watch会返回一个unwatch函数，如果需求上需要在某些场景取消watch,可以执行`unwatch`
    const unwatch = this.$watch('searchValue', (newValue, oldValue) => {
      // 判断搜索
      if (newValue !== oldValue) {
        // 在这里处理搜索逻辑
      }
    })
  }
}
</script>
```
вызов$watch, будет возвращаемое значениеunwatch, а затем, если нам нужно отменить прослушивание просмотра, мы можем вызватьunwatchНапример, если есть форма, кнопка сохранения в форме обычно неактивна, но если пользователь изменяет форму, неактивное состояние формы необходимо изменить на активное. Но если форма уже включена, продолжать не нужно.watch, то нужно использоватьunwatch

`Vue3.0`правописание в

существуетVue3.0КромеVue2.0Помимо правописания вComposition APIпри условииwatchа такжеwatchEffectдваAPI, используемый для отслеживания изменений в данных, мы будем использовать вышеперечисленные поиски отдельноwatchа такжеwatchEffectреализовать

watchМетод реализации

<template>
  <div>
    <span>搜索</span>
    <input v-model="state.searchValue" />
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, watch } from "vue";

export default defineComponent({
  setup() {
    const state = reactive({
      searchValue: ""
    });
    // 通过watch来监听searchValue的变化
    const unwatch = watch(
      () => state.searchValue,
      (value, oldValue) => {
        if (value !== oldValue) {
          // 在这里处理搜索逻辑
        }
      }
    );
    return {
      state
    };
  }
});
</script>

watch APIа такжеVue2.0серединаthis.$watchИспользование в основном такое же, включая используемые параметры и т. д.watch APIвернулсяunwatchфункция отменыwatch

в то же времяwatchВы также можете прослушивать изменения в нескольких свойствах, например

watch([a,b,c], ([a,b,c],[oldA,oldB,oldC]) => {
  
})

watchEffectвыполнить

watchEffectПараметр представляет собой функцию, которая будет выполняться сразу после выполнения кода.watchEffectПередаваемая функция затем реактивно отслеживает свои зависимости и повторно запускает функцию, если некоторые из этих зависимостей изменяются. Мы используем приведенный выше код поиска, используяwatchEffectреализовать
```
export default defineComponent({
  setup() {
    const state = reactive({
      searchValue: ""
    });
    // 加载数据
    function loadData(searchValue){
      
    }
    // 通过watchEffect来监听searchValue的变化
    const unwatch = watchEffect(() => {
      // 当代码执行到watchEffect时，会立即调用此函数，同时会收集到存在
      //`state.searchValue`的依赖，然后当`state.searchValue`发生
      //变化时会在此调用watchEffect，已实现数据监听
      loadData(state.searchValue)
    });
    return {
      state
    };
  }
})
```

`React`использование в

существуетReactнейтральныйwatchБолее похожая функцияEffect Hook, его использование позволяет выполнять побочные эффекты в функциональных компонентах, давайте сначала посмотрим на код

import React, { useEffect, useState } from 'react'

export default function() {
  // useState传入要初始化的状态数据，然后会返回一个数组
  // 数组第一项为声明的数据，而第二个参数是一个方法，用于调用
  // 修改数据
 const [searchValue, setSearchValue] =  useState('')

 function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
   // 在react修改数据需要调用useState返回的方法
   setSearchValue(e.target.value);
 }

 // useEffect接受两个参数，第一个是回调函数，第二个是要监听变化的属性，是一个数组
 useEffect(() => {
   // 当代码首次调用useEffect会进入这个回调函数，然后
  // 当serchValue 发生变化时，会再次进入到这里
  console.log(111)
 },[searchValue])
  return (
    <div>
      <input value={searchValue} onChange={handleChange}></input>
      
    </div>
  );
}

Как и в приведенном выше коде, мы используемuseEffectконтролироватьsearchValueизменяется, а затем срабатывает новая логика, но, увидев вышеприведенный код, мы не нашли отменуeffectметод, так как его отменить?

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

 const [isWatch] = useState(true)

 useEffect(() => {
  // 通过isWatch来判断是否进行监听逻辑变化   
  if(isWatch) {
    // 监听数据变化
    console.log(searchValue)
  }
 },[isWatch, searchValue])

Расчетные свойства, в`React`Я также нашел следы в

VueЯ полагаю, что все знакомы с вычисляемыми свойствами вtemplateУпростите сложные логические вычисления вfirstNameа такжеlastNameТогда интерфейс будет над ним,firstNameа такжеlastNameОтображаемые вместе, вы можете использовать вычисляемое свойство для обработки отображения

`Vue2.0`правописание в

<template>
  <div>
    <div>
      <label>firstName</label>
      <input v-model="firstName" />
      <label>lastName</label>
      <input v-model="lastName" />
    </div>
    <div>用户名:{{ name }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: ''
    }
  },
  computed: {
    name() {
      return this.firstName + '·' + this.lastName
    }
  }
}
</script>

`Vue3.0`правописание в

существуетVue3.0изComposition APIтакже обеспечиваетcomputed API, используемый для создания вычисляемых свойств, используется так же, какVue2.0Использование в основном такое же

import { computed, defineComponent, reactive } from "vue";

export default defineComponent({
  setup() {
    const state = reactive({
      firstName: "",
      lastName: ""
    });
    const name = computed(() => state.firstName + "·" + state.lastName);
    return {
      state,
      name
    };
  }
});

`React`правописание в

говоря оReactПеред моделированием вычисляемых свойств вReact Hookправило.

Можно использовать только на верхнем уровнеHook
только вReactвызов функцииHook

когда мыReactиспользуется в функцииuseStateПосле этого, если мы пройдемsetStateотредактированоstate, то на этот разreactЧто будет сделано?Reactповторно выполнит этот функциональный компонент, но для внутреннейuseState,useEffectи т. д. не будут повторно инициализированы, а будут обрабатываться с использованием уже зарегистрированного состояния. ТакReactоткуда ты знаешь какойstateчто соответствуетuseStateШерстяная ткань? ответReactполагаться наHookпорядок звонков. Таким образом, у нас не может быть не высшего уровня, например.ifвнутри использованиеHook.

В то же время? потому чтоstateИзменение вызовет перевыполнение всей функции, тогда если мы пропишем такой кусок логики в коде

const [firstName, setFirstName] = useState('')
const [lastName, setLastName ] = useState('')
const [other,setOther] = useState('')

// 使用 useMemo可以模仿Vue中的计算属性
const name = firstName + "·" + lastName;

В приведенном выше коде нашnameчерезfirstNameа такжеlastNameрассчитано, то когдаfirstNameилиlastNameПри возникновении изменений они будут пересчитаныname, логика правильная. Но по фактуotherЕсли произойдут изменения, это также приведет кnameПересчет, который мы не хотим видеть. еслиnameЛогика вычислений очень сложная, тогда это вызовет ненужные затраты на производительность. такReactпри условииuseMemo, используется, чтобы избежать изменений в логике вычислений, вызванных изменениями несвязанных атрибутов, и мы можем просто использоватьuseMemoЧтобы имитировать вычисляемые свойства, следующий код

import React, {  useMemo, useState } from 'react'

export default function() {
  const [firstName, setFirstName] = useState('')
  const [lastName, setLastName ] = useState('')

  // 使用 useMemo可以模仿Vue中的计算属性,当firstName与`lastName`任何一个发生变化
  //都会触发`name`重新计算，但是对于其他属性变化，并不会引起重新计算
  const name = useMemo(() => firstName + '·' + lastName,[firstName,lastName])

  const handleChange = (method: Function, e: React.ChangeEvent<HTMLInputElement> ) => {
    method(e.target.value)
  }

  return (
    <div>
      <div>
        <label>firstName</label>
        <input
          value={firstName}
          onChange={(e) => handleChange(setFirstName, e)}
        />
        <label>lastName</label>
        <input
          value={lastName}
          onChange={(e) => handleChange(setLastName, e)}
        />
      </div>
      <div>用户名:{name}</div>
    </div>
  );
}

Но вVueВычисляемое свойство может либоget, также можноset, который мы не можем использоватьuseMemoКонечно, для моделирования, если маленький партнер знает, как моделировать, сообщите мне об этом в области комментариев ниже, спасибо.

Суммировать

Front-end технология развивается с каждым днем, я сказал, что не могу больше этому учиться, но я не научился зарабатывать деньги и есть, поэтому мне все равно придется этому учиться. Как один из трех основных интерфейсных фреймворковVueа такжеReact, по-прежнему очень часто используется в повседневной работе.Благодаря этому сравнительному исследованию можно лучше совместить их для облегчения памяти. Эта статья была впервые опубликована в общедоступном аккаунте** [небольшая игра во внешнем интерфейсе], изучите интерфейс, пройдите собеседование, чтобы найти работу, просто в[Некоторая игра на переднем конце]**

данныеdata,существуетreactсредняя ставкаstate

Vue2.0использование в

Vue3использование в

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

Реагирование на изменения данных

Reactиспользование в

слушательwatch, нет ничего плохого в том, чтобы следить за вами

Vue2.0правописание в

Vue3.0правописание в

Reactиспользование в

Расчетные свойства, вReactЯ также нашел следы в

Vue2.0правописание в

Vue3.0правописание в

Reactправописание в

Суммировать

данные`data`,существует`react`средняя ставка`state`

`Vue2.0`использование в

`Vue3`использование в

`React`использование в

слушатель`watch`, нет ничего плохого в том, чтобы следить за вами

`Vue2.0`правописание в

`Vue3.0`правописание в

`React`использование в

Расчетные свойства, в`React`Я также нашел следы в

`Vue2.0`правописание в

`Vue3.0`правописание в

`React`правописание в