Будет ли это делать Vue? Давайте познакомимся с React (Часть 1)

внешний интерфейс Vue.js React.js Facebook
Будет ли это делать Vue? Давайте познакомимся с React (Часть 1)

предисловие

В рамках внутреннего развития Instagram instagram React представляет собой отличную библиотеку JS для построения пользовательских интерфейсов. Он был открыт в мае 2013 года. В качестве одной из трех трехпродоношенных рамках реагирования можно сказать, что реагируют широко используются, и многие крупные компании, в том числе BAT, разработали много проектов, основанных на нем.

Vue: Помимо VDom, отзывчивость Vue сильно отличается от реакции React, будь то собственный синтаксис или внешнее стороннее программное обеспечение поддержки.Короче говоря, мигрировать будет не так просто.

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

Быстро создайте среду разработки React с помощью приложения create-реагировать

create-react-app от Facebook, с помощью этой команды мы можем быстро создать среду разработки React без настройки.

Проект, автоматически создаваемый приложением create-react-app, основан на Webpack + ES6.

  • yarn add create-react-app -g
  • create-react-app projectName
  • cd projectName
  • yarn start

Затем откройте браузер и введите http://localhost:3000/, вы увидите гексаграмму LOGO React.
Вот важные части React

  • JSX — позволяет нам писать HTML-подобный синтаксис в легковесных объектах JavaScript.
  • Виртуальный DOM — JavaScript-представление фактического DOM.
  • React.Component — как вы создаете новые компоненты
  • render (метод) — описывает внешний вид пользовательского интерфейса определенного компонента.
  • ReactDOM.render — Рендеринг компонентов React в узлы DOM.
  • состояние — внутреннее хранилище данных компонента (объект).
  • конструктор(это.состояние) — способ установить начальное состояние компонента.
  • setState — вспомогательный метод для обновления состояния компонента и повторного рендеринга пользовательского интерфейса.
  • props — данные, передаваемые от родительского компонента к дочернему.
  • propTypes — позволяет контролировать наличие или тип определенных реквизитов (свойств), передаваемых дочерним компонентам.
  • defaultProps — позволяет установить реквизиты (свойства) по умолчанию для вашего компонента.
  • Жизненный цикл компонента:
    1. componentDidMount — срабатывает при монтировании компонента
    2. componentWillUnmount — срабатывает до размонтирования компонента
    3. getDerivedStateFromProps — срабатывает при монтировании компонента и при изменении реквизитов. Используется для обновления состояния компонента при изменении его свойств.
  • мероприятие:
    1. onClick
    2. onSubmit
    3. onChange

Синтаксис React JSX

Язык HTML написан непосредственно на языке JavaScript без каких-либо кавычек.Это синтаксис JSX, который позволяет смешивать HTML и JavaScript.

Поскольку в React нет цикла v-for с одним щелчком, такого как vue, вам нужно вручную использовать карту, чтобы реализовать его самостоятельно. Рендеринг:

Компоненты React, вложенные компоненты и подкомпоненты передачи данных

Vue передает данные через свойства в дочерних компонентах, в то время как React использует this.props.attr для передачи,Обратите внимание, что здесь нет знака $! Первая буква класса компонента должна быть заглавной, иначе будет выдано сообщение об ошибке, например, HelloMessage нельзя записать как helloMessage. Кроме того, класс компонента может содержать только один тег верхнего уровня, иначе будет сообщено об ошибке.

JSX позволяет вставлять переменные JavaScript прямо в шаблон. Если эта переменная является массивом, все члены массива будут расширены.Мы определяем arr с 2 тегами title в нем, и эффект достигается добавлением {arr} в шаблон ul** (обратите внимание, что это не "" из vue, не путайте два)**

this.props.children

this.props.attr — это данные или атрибут, передаваемые компонентом, а this.props.children представляет все дочерние узлы компонента, которые можно просмотреть и проверить с помощью this.props.children.map.

React PropTypes

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

Свойство PropTypes класса компонента используется для проверки соответствия свойств экземпляра компонента требованиям.

yarn add prop-types
import PropTypes from 'prop-types'

В MyTitle есть свойство title, и его значение является строкой. Мы можем определить тип свойства в компоненте через MyTitle.propTypes. Если title: PropTypes.string изменить на другой тип, будет сообщено о следующей ошибке.

ссылка на React

  1. Как и ссылка vue, компоненты — это не настоящие узлы DOM, а структура данных, которая существует в памяти и называется виртуальной DOM.
  2. Он становится настоящим DOM только тогда, когда он вставлен в документ. Согласно дизайну React, все изменения DOM сначала происходят в виртуальном DOM, а затем фактические изменения отражаются в реальном DOM.Этот алгоритм называется DOM diff, который может значительно повысить производительность веб-страниц.
  3. Однако иногда вам нужно получить настоящий узел DOM из компонента, тогда вам нужно использовать атрибут ref.
    Слишком много картинок, вставьте код сюда.. Пожалуйста, не обращайте внимания на слова в начале..
class App extends Component {
      handleClick () {
        this.refs.myTextInput.focus()
      }
      render() {
        return (
          <div className="App">
            <LikeButton/>
            <input type="text" ref="myTextInput"/>
            <input type="button" value="Focus the text input" onClick={ this.handleClick.bind(this) }/>
          </div>
        );
      }
    }

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

Реагировать на this.state и кликать события

Состояние в React эквивалентно хранилищу данных во Vue, а this.setData апплета всем понятно.

class LikeButton extends Component {
  state = {
    liked: false
  }
  handleClick () {
    // console.log(this)
    this.setState({
      liked: !this.state.liked
    })
  }
  render() {
    const text = this.state.liked?'liked':'don\'t like'
    return (
      <p onClick={ () => this.handleClick() }>
        You { text } this.click to toggle
      </p>
    )
  }
}

Определите здесь текстовую переменную, оцените значение текста по понравившемуся в состоянии, а затем повторно измените значение понравившегося через событие клика onClick.Эффект можно реализовать с помощью кода, который представляет собой обычную модель MVVM.

Двусторонняя привязка данных в React

Реализация v-model в vue в один клик не имеет -0- в React, но мы можем просто реализовать ее через событие onChange и сразу перейти к коду.

class App extends Component {
  state= {
    value: 'Hello!'
  }
  handleChange (event) {
    this.setState({
      value: event.target.value
    })  }
  render() {
    const val = this.state.value
    return (
      <div className="App">
        <div>
          <input type="text" value={val} onChange={this.handleChange.bind(this)}/>
          <p>{ val }</p>
        </div>
      </div>
    );
  }
}

Жизненный цикл компонента React

Жизненный цикл компонента делится на три состояния:

  • Монтаж: вставлен настоящий DOM
  • Обновление: перерисовывается
  • Размонтирование: перемещено из реального DOM

React предоставляет две функции обработки для каждого состояния.Функция will вызывается перед входом в состояние, а функция did вызывается после входа в состояние.Для трех состояний существует пять функций обработки.

  • componentWillMount(): вызывается перед вставкой реального DOM
  • componentDidMount(): вызывается после вставки реального DOM
  • componentWillUpdate (объект nextProps, объект nextState): вызывается перед повторным рендерингом
  • componentDidUpdate (объект prevProps, объект prevState): вызывается после повторного рендеринга
  • componentWillUnmount(): вызывается перед удалением реального DOM

Кроме того, React предоставляет два специальных обработчика состояний.

  • componentWillReceiveProps (object nextProps): вызывается, когда загруженный компонент получает новые параметры
  • shouldComponentUpdate(object nextProps, object nextState): вызывается, когда компонент определяет, следует ли повторно отображать

Кроме того, стоит отметить и способ установки атрибута стиля компонента, его нельзя записать какstyle="opacity:{this.state.opacity};"быть записано какstyle={{opacity: this.state.opacity}}

Эпилог

Нелегко быть фронтенд-программистом, фронтенд-технология обновляется слишком быстро, а еще бывают фронтенд-стебли типа «не обновляй, я больше не могу этому учиться». Тем не менее, бесконечные передовые технологии позволяют нам видеть будущее переднего плана. Мы все люди, которые хотят делиться. Я надеюсь, что смогу помочь и вам, кто учится. Эти демо все в моемgithub, Заинтересованные друзья могут клонировать посмотреть, недавно прокатилсяличный блог, Добро пожаловать на шаг вперед, есть ли стиль научной фантастики на стороне ПК? ! тема изгексо-темаПоследнее слово! Очень важный! Если эта моя статья помогла вам, то вы можете нажать на звездочку, а затем идти ~ Upupup вместе!

Категории