Позвольте вам снова просмотреть документацию Vue, и вы, кстати, изучите React.

Vue.js

вводить

Недавно я взялся за проект с открытым исходным кодом React. Перед тем, как начать, я прочитал несколько базовых руководств по React. У меня было от полугода работы с Angular до 2 лет опыта работы с интерфейсом Vue, но я все еще боялся React.

Поработав над проектом около недели, я обнаружил, что код в мире одинаков. Использование React почти такое же, как и Vue. Единственная стоимость обучения — это синтаксис (если вы можете понять концепцию интерфейсная структура и компонентизация).

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

  1. Структура всей статьи соответствует каталогу документов Vue, и некоторые из них были удалены, некоторые из них я еще не использовал, а некоторые из соответствующих описаний могут быть удалены, потому что мое мышление неясно.
  2. Каждая часть обычно сначала перемещает реализацию функции или грамматику в документ Vue, а затем вручную вводит соответствующую реализацию или грамматику в React.
  3. Вся статья в начале 10000 слов.Рекомендуется внимательно смотреть каждый пример.Вам может понадобиться 20 минут? ?

Прежде чем начать чтение, разум молча продекламировал вслух предложение:

在这里插入图片描述

Что такое Vue.js

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

Начало

Отправной точкой vue, конечно же, является то, что vue-cli создает проект, в этом месте нет кода vue-cli, то же самое верно и для реакции.

Сначала нужно установитьcreate-react-app, который является «vue-cli», который вы хотите использовать:

npm install -g create-react-app

Затем мы создаем реактивный проект с ним:

create-react-app react-demo

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

在这里插入图片描述

Декларативный рендеринг

В основе Vue.js лежит система, которая позволяет декларативно отображать данные в DOM, используя краткий синтаксис шаблона с использованием v-bind и двойных фигурных скобок:

<div id="app">
  <span v-bind:title="message">
    {{ name }}
  </span>
</div>

var app = new Vue({
  el: '#app',
  data: {
    name: 'Hello Vue!'
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

Нечего сказать о синтаксисе привязки шаблонов vue, почти такой же метод двусторонней привязки используется в реакции:

import React, { Component } from 'react'

class DemoComponent extends Component {
    constructor() {
        super()
        // 将this.state看做你vue中的data
        this.state = {
            name: 'hello',
            title: '页面加载于 ' + new Date().toLocaleString()
        }
    }
    render() {
        return (
            // 单大括号的双向绑定语法
            <span title={this.state.title}>{this.state.name}</span> 
        )
    }
}
export default DemoComponent

Рендеров нет, слишком безвкусно, просто добавлю отзыв:

  1. Двустороннее связывание реакции单括号
  2. Свойства двусторонней привязки React также напрямую используют одинарные скобки,没有冒号没有引号
  3. Следует использовать переменные двусторонней привязки React.this.state.变量名, вместо прямой ссылки на имя переменной это

Условия и циклы

Условное суждение в vue использует v-if и v-show, а циклы используют v-for

<div id="app">
  <p v-if="seen">现在你看到我了</p>
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app = new Vue({
  el: '#app',
  data: {
    seen: true,
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

В реакции это может быть немного проблематично:

import React, { Component } from 'react'

class DemoComponent extends Component {
    constructor() {
        super()
        this.state = {
            seen: true,
            todos: [
                { text: '学习 JavaScript' },
                { text: '学习 Vue' },
                { text: '整个牛项目' }
            ]
        }
    }
    render() {
        return (
            <div>
                /* 使用三元表达式 */
                {this.state.seen
                    ? <p>现在你看到我了</p>
                    : null
                }
                
				/* 使用三元表达式的另一种 */
                <p>{this.state.seen ? '现在你看到我了' : null}</p>
                
				/* 使用map()进行dom遍历 */
                <ol>
                    {this.state.todos.map((item) => {
                        return (
                            <li>{item.text}</li>
                        )
                    })}
                </ol>
            </div>
        )
    }
}
export default DemoComponent
  1. Условное суждение в реакции в основном реализовано с использованием характеристик условных выражений js (поищите, есть ли соответствующее v-show в популярной науке)
  2. Цикл обычно используется в реакцииmapМетод обхода возвращаемой структуры dom должен быть зациклен.
  3. Конечно, это просто основное использование

Обработка пользовательского ввода

Vue использует директиву v-on для добавления прослушивателя событий, через который вызываются методы, определенные в экземпляре Vue: Vue также предоставляет директиву v-model, которая позволяет легко реализовать двустороннюю привязку между вводом формы и состоянием приложения:

<div id="app">
  <input v-model="message">
  <button v-on:click="reverseMessage">反转消息</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

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

import React, { Component } from 'react'

class DemoComponent extends Component {
    constructor() {
        super()
        this.state = {
            message: 'Hello Vue.js!'
        }
    }
    reverseMessage(event) {
        this.setState({
            message: this.state.message.split('').reverse().join('')
        })
    }
    render() {
        return (
            <div>
            	/* 单大括号绑定 */
                <input value={this.state.message} />
                <button onClick={this.reverseMessage.bind(this)}>反转消息</button>
            </div>
        )
    }
}
export default DemoComponent

А вот и точка знаний:

  1. Из-за функции рендеринга, используемой реакцией, почти все функции реакции реализованы с использованием синтаксиса js вместо синтаксиса инструкций.
  2. События, такие как щелчок, а также атрибуты тегов, такие как заголовок и держатель ладони, напрямую используют фигурные скобки.
  3. Двусторонние связанные переменные в реакции не будут реагировать на серию операций и модификаций переменных с помощью js.Чтобы добиться рендеринга страницы и обновления любых двусторонних связанных переменных, вам необходимо использовать реакциюthis.setState({}）Синтаксис, ключ — это имя переменной в состоянии, а значение — это обновленное значение переменной (если вы написали собственный апплет, это должно быть легко понять)
  4. Методы могут быть определены непосредственно в классе, что отличается от существования vue в объекте методов, и обычно передают это через привязку при связывании методов, иначе в вашем методеthis.Будет сообщено об ошибке, классическая проблема этой области, популярная наука самостоятельно.

Vue-примеры

Создайте экземпляр Vue

Каждое приложение Vue начинается с создания нового экземпляра Vue с функцией Vue:

вью экземпляр:

var vm = new Vue({
  // 选项
})

Пример реакции:

import React, { Component } from 'react'

class DemoComponent extends Component {
  // 内容
  render () {
  }
}
export default DemoComponent

Очки знаний:

  1. Компонент реакции — это экземпляр класса Class, который наследует компонент от реакции.
  2. Компонент реакции должен пройтиrender ()возвращениеJSX, и может вернуть только одинJSXэлемент(2необходимое условие)
  3. Что общего у vue и react, так это то, что самый внешний слой должен иметь单一из根元素Этикетка

Становится проще, не так ли?next=>

Данные и методы

  • данные vue используютdata函数Возвращает объект для сохранения переменных в текущем экземпляре vue.Самописаемые методы в экземпляре vue помещаются вmethodsсередина
  • Реагирующие данные помещаются вstate, методы можно определить прямо в классе, если вы достаточно знаете о классах ES6, то легко поймете, о чем я говорю. (Если вам неловко, вы можете перечитать ES6)
  • Существует также способ использования внутренних переменных:
render() {
		// render()函数中直接定义变量，毕竟它是个函数，这是合理的
        let tip = "Hello!"
        return (
            <div>
                {{tip}}
            </div>
        )
    }

Поскольку рендеринг — это функция, вы можете определить переменные внутри функции непосредственно перед возвратом какой-либо структуры dom. Это просто еще раз подчеркивает то, что я сказал ранее“ 因为react是使用的render函数，所以react所有特性几乎都是使用js的语法来实现”

хуки жизненного цикла экземпляра

Другими словами, чтобы я мог печатать меньше:

крючки жизненного цикла vue react
Перед созданием экземпляра beforeCreate - - -
После создания экземпляра created constructor()
Перед монтированием DOM beforeMount componentWillMount
После монтирования DOM mounted componentDidMount
Когда данные обновляются beforeUpdate componentWillUpdate
После обновления данных updated componentDidUpdate
Когда активен контроль активности activated
Когда компонент проверки активности отключен deactivated
до уничтожения экземпляра beforeDestroy componentWillUnmount
После уничтожения экземпляра destroyed componentWillUnmount
Когда возникает ошибка в дочернем компоненте errorCaptured
  • Конечно, есть еще много специфических и тонких пробелов, а также есть некоторые жизненные циклы componentWillReceiveProps, componentWillReceiveProps и т. д., но жизненный цикл в таблице соответствует знакомому вам vue, которого должно быть достаточно, чтобы вы могли напрямую понять, какие жизненные циклы реагируют и что они делают.

синтаксис шаблона

интерполяция

текст

Наиболее распространенной формой привязки данных vue является интерполяция текста с использованием синтаксиса «Mustache» (двойные фигурные скобки):

<span>Message: {{ msg }}</span>

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

<span>Message: { this.state.msg }</span>

(Кроме того, я не знаю, есть ли соответствующая V-однажды реализация, добро пожаловать на комментарий к Лайкому)

необработанный HTML

vue использует v-html для прямого вывода реального HTML, предполагая, что у нас есть шаблон строки html с именем rawHtml:

<p> 
  <span v-html="rawHtml"></span>
</p>

React прост, потому что это функция рендеринга, поэтому вы можете:

render () {
  const rawHtml= `<span> is span </span>`
  return (
    <div>
      <p>{rawHtml}</p>
    </div>
  )
}

характеристика

использоватьv-bind:Действует на атрибуты HTML:

<button v-bind:disabled="isButtonDisabled">Button</button>

реагировать напрямую{}Связывать:

<button disabled={this.state.isButtonDisabled}>Button</button>

Используйте выражения JavaScript

Основные выражения, используемые в официальном примере vue, следующие:

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

Вы можете использовать простые операторы, троичные выражения и цепные вызовы, а использование react полностью соответствует тому, как вы используете js в своей повседневной жизни.Все три варианта хороши. Еще один момент, который следует упомянуть, это то, что в Vue вы можете напрямую использовать {{}} для привязки метода или имени метода в вычисляемом свойстве, например:

<div>{{changeName()}}</div>

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

<div>{(function () { return 'is div'})()}</div>

вычисляемое свойство

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

слушатель

Vue предоставляет более общий метод реагирования на изменения данных с помощью параметра наблюдения, который не является конкретным, потому что:react 的状态都是手动 setstate 变化的，react 不监听数据变化，я не резала...

Привязка класса и стиля

Привязать класс HTML

vue может передать объект в v-bind:class для динамического переключения классов:

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"

></div>

Существование двух классов active и text-danger будет зависеть от оценки атрибутов данных isActive и hasError.

Vue также может передать массив в v-bind:class, чтобы применить список классов:

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

И в ответ,

  • Во-первых!不能使用class, потому что класс является ключевым словом, поэтому в реакции используетсяclassNameзаменять,
  • А в реакции можно использовать только фичи реакции, и наконец класс преобразуется в строку, например:
<div className={["activeClass",hasError? item.color :'' ].join('')} ></div>
  • Или строка шаблона es6:
<div className={`activeClass ${hasError?item.color:'' }`} ></div>

Связывание встроенных стилей

Синтаксис объекта Vue v-bind:style очень интуитивно понятен — он очень похож на CSS, но на самом деле это объект JavaScript. CSS Имена свойств могут быть названы в CamelCase или разделены тире (кебаб-регистр, не забудьте заключить их в кавычки):

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

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

В это время хорошо выглядеть知识点,

在这里插入图片描述
Используйте одиночные скобки для стиля привязки в реакции{}, но свойство стиля необходимо передать как объект:

<div style={{display: this.state.isShow ? "block" : "none"}}></div>

При использовании нескольких стилей обратите внимание на запятую в форме объекта.,Разделять!

<div style={{display: this.state.isShow ? "block" : "none", color:"pink"}}></div>

Рекомендуется посмотреть это и сделать небольшую паузу, чтобы увидеть разницу.

условный рендеринг

v-if

Vue — это v-if, v-else, v-show, если не сказать больше, это относительно просто:

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

Условное суждение реакции было введено в начале. Обычно для оценки отображения используются троичные выражения. Вот способ назначить элементы JSX различным переменным, а затем использовать троичные выражения для оценки:

render () {
  const display = true
  const showDiv = <p>显示</p>
  const noneDiv = <p>隐藏</p>
  return (
    <div>{display ? showDiv : noneDiv }</div>
  )
}

Нет vue, похожего на v-show, что экономит потребление производительности при переключении dom.Комментарии приветствуются.

Рендеринг списка

В vue мы можем использовать директиву v-for для отображения списка на основе массива.

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

Что касается конкретных, то зачем вам добавлять ключи, как обходить объекты и как определять массивы по v-for?

Цикл в реакции также упоминался в начале, не говоря уже об использовании метода map() для обхода.

привязка ввода формы

Связывание элементов формы в vue связано с v-model.В качестве примера возьмем ввод:

<input v-model="message" placeholder="edit me">

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

<input value={this.state.message} placeholder="edit me">

Основы компонентов

Базовый пример

Как уже упоминалось, экземпляр — это, по сути, компонент, а чисто функциональные компоненты появляются позже в vue.Концепция двух компонентов фреймворка одинакова.

Повторное использование компонентов

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

Ссылки в vue обычно используются-Метки интервалов, например:

<div id="components-demo">
  <button-counter></button-counter>
</div>

import DuttonCounter from './modules/DuttonCounter'

export default {
  components: {
      DuttonCounter
  },
}

Ссылочная метка в реакции напрямую использует имя класса класса экспорта и组件都必须要用大写字母开头:

import DuttonCounter from './modules/DuttonCounter'

function App() {
  return (
    <div className="App">
      <DuttonCounter />
    </div>
  );
}

Передача данных дочерним компонентам через Prop

Давай, очки знаний, для проверки!

在这里插入图片描述
Сначала кратко рассмотрим, как vue передает значения дочерним компонентам:

Родительский компонент:

<super-man work="超人"></super-man>

Дочерний компонент получает:

<div>{{work}}</div>

export default {
  props: {
      work: {
        required: true,
        type: String
      }
   },
}

Затем взгляните на реквизит реакции на примере:

class Index extends Component {
  render () {
    return (
      <div>
        <SuperMan work='超人' />
      </div>
    )
  }
}

Это то, как компоненты передают значения, что похоже на vue.Давайте посмотрим на получение компонентов для передачи значений:

class SuperMan extends Component {
  constructor () {
    super()
    this.state = {}
  }

  render () {
    return (
      <div>{this.props.work}</div>
    )
  }
}

В React ключевое слово props также используется для получения переданного значения родительского компонента Отличие от vue в том, что:

  1. Все переданные значения vue должны быть помещены в объект реквизита подкомпонента, прежде чем он может быть использован текущим подкомпонентом Способ его использования подобен доступу к переменной данных напрямуюthis.变量использовать. реагировать на использованиеthis.props.变量Таким образом, вы можете напрямую использовать все переменные, переданные родительским компонентом.
  2. Чтобы передать параметры объекта дочерним компонентам в реакции, вы можете использовать{{}}Двойные скобки передают объект напрямую
class Index extends Component {
  render () {
    return (
      <div>
        <SuperMan work={{name: '超人', task: '拯救世界'}} />
      </div>
    )
  }
}

3. Даже передаточная функция:

class Index extends Component {
  render () {
    return (
      <div>
        <SuperMan onClick={this.handleClick.bind(this)}/>
      </div>
    )
  }
}

Затем добавьте несколько дополнительных очков знаний,

在这里插入图片描述
Про использование пропсов в vue я уже говорил, можно задать type, required, default, валидатор и т. д. Если не знаете, можете прочитать прошлую статью "Сокровище, которое вы не нашли в документе vue" в конце.

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

class SuperMan extends Component {
  // 知识点
  static defaultProps = {
    work: '默认是超人'
  }
  constructor () {
    super()
    this.state = {}
  }

  render () {
    return (
      <div>{this.props.work}</div>
    )
  }
}

Определение defaultProps в реакции является конфигурацией по умолчанию для каждого свойства в свойствах. Таким образом, нам не нужно судить, передаются ли свойства конфигурации: если нет, мы можем использовать свойства по умолчанию в defaultProps непосредственно в this.props.

Во-вторых, что касается проверки реквизитов в реакции, давайте сначала объявим, что «проверка типов PropTypes в реакции устарела, начиная с React v15.5», а затем как мне продолжить? ? В настоящее время prop-types необходимо устанавливать отдельно.Теперь в React мы обычно используем prop-types для определения типа свойств компонентов.

npm install --save prop-types

Использование также очень простое, вы можете понять это на примере:

// 知识点
import PropTypes from 'prop-types'

class SuperMan extends Component {
  // 知识点
  static propTypes = {
    work: PropTypes.string
  }
  
  constructor () {
    super()
    this.state = {}
  }

  render () {
    return (
      <div>{this.props.work}</div>
    )
  }
}

Просто и ясно, вводя prop-types и добавляя атрибут класса propTypes, укажите тип данных для переменных, передаваемых вашими реквизитами в propTypes, что эквивалентно vue.type:String.

Тогда давайте посмотрим наrequired: trueКак реализовать в реакции:

import PropTypes from 'prop-types'

class SuperMan extends Component {
  static propTypes = {
    work: PropTypes.string.isRequired  // 知识点
  }
  
  constructor () {
    super()
    this.state = {}
  }

  render () {
    return (
      <div>{this.props.work}</div>
    )
  }
}

Более пристальный взгляд на отличие от приведенного выше примера заключается в том, что когда мы указываем тип данныхPropTypes.stringПосле этого одновременно используется ключевое слово isRequired для принудительной передачи параметра компонента.

Наконец, как реализовать проверку прохождения параметров компонента в реакции? Я еще не использовал это, но я проверил это для вас, и это похоже на то, что я догадался, просто используйте функцию напрямую:

import PropTypes from 'prop-types'

class SuperMan extends Component {
  static propTypes = {
    work: function(props,propName,componentName){
    }  // 知识点
  }
  
  constructor () {
    super()
    this.state = {}
  }

  render () {
    return (
      <div>{this.props.work}</div>
    )
  }
}

Используйте пользовательскую функцию, параметры по умолчанию — props, propName, componentName, а затем ошибка проверкиreturn new Error('错误信息');Вот и все.

Поместите некоторые другие примеры, которые я видел, хотя я еще не использовал их, но это хороший трюк:

//指定枚举类型：你可以把属性限制在某些特定值之内
optionalEnum: PropTypes.oneOf(['News', 'Photos']),

// 指定多个类型：你也可以把属性类型限制在某些指定的类型范围内
optionalUnion: PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number,
  PropTypes.instanceOf(Message)
]),

// 指定某个类型的数组
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

// 指定类型为对象，且对象属性值是特定的类型
optionalObjectOf: PropTypes.objectOf(PropTypes.number),

Прослушивание событий дочернего компонента

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

Итак, как вызвать родительский компонент или родительский компонент для прослушивания изменений дочернего компонента, в vue через$emitметод для запуска метода родительского компонента, пример не указан, давайте посмотрим, как реакция реализована напрямую:

// 父组件
class Index extends Component {
  this.state = {type:'小超人'}
  
  changeType(data) {
    this.setState({
      type: data //把父组件中type的替换为子组件传递的值
    })  
  }
  
  render () {
    return (
      <div>
        <SuperMan work='超人' super={this.fn.changeType(this)}/> // 知识点
      </div>
    )
  }
}

// 子组件
class SuperMan extends Component {
  constructor () {
    super()
    this.state = {childText:'大超人'}
  }
  
  clickFun(text) {
    this.props.super(text)//这个地方把值传递给了props的事件当中
  }
  
  render () {
    return (
      <div onClick={this.clickFun.bind(this, this.state.childText)}>
        {this.props.work}
      </div>
    )
  }
}

Нет проблем, я понимаю хорошо, но я не использую его$emit, а напрямую черезthis.propsПросто вызовите метод родительского компонента.

Распространяйте контент через слоты

Часть слота просто используется.Во-первых, как мы используем слот в vue:

// 父组件
<my-component>
  <p>超人</p>
</my-component>

// 子组件
<div class="child-page">
  <h1>无限地球危机</h1>
  <slot></slot>
</div>

// 渲染结果
<div class="child-page">
  <h1>无限地球危机</h1>
  <p>超人</p>
</div>

Куча слотов подробно расписывать не будем, просто посмотрим, как реализовать слоты вроде vue в react:

// 父组件
ReactDOM.render(
  <MyComponent>
	<p>超人</p>
  </MyComponent>,
  document.getElementById('root')
)

class MyComponent extends Component {
  render () {
    return (
      <div class="child-page">
        <h1>无限地球危机</h1>
        {this.props.children}
      </div>
    )
  }
}

Результат рендеринга согласуется с рендерингом Vue.Вы можете видеть, что содержимое JSX в родительском компоненте передается дочернему компоненту в реакции, а{this.props.children}Рендеринг содержимого JSX в указанную структуру страницы все еще хорошо изучен.

это конец

По состоянию на конец моего письма, это была неделя с перерывами. Я посмотрел на 11386 слов в правом нижнем углу. Код в проекте похож. Поскольку это проект с открытым исходным кодом, многие из них высокоуровневые компоненты, некоторые чисто функциональные компоненты.Это все еще сбивает с толку, но теперь это почти изменило некоторые функции.

Пока что по структуре в документе vue (некоторые части были удалены) разобрали соответствующий синтаксис и функции react.Если вы можете внимательно сравнить каждый пример, я думаю, что вы не можете написать react, вы также можете прочитайте это Поймите реактивный проект.

Если есть дополняющий комментарий, ставьте балл, а если дополнения нет, ставьте лайк.

благодаря.

Категории