Непонятные моменты для начинающих, чтобы научиться реагировать (1)

JavaScript React.js

Реагировать на использование разнообразной онлайн-речи, сказал Vue, сложно, чем может бросить вызов, это не глубокое понимание JSX или некоторые характеристики ES6 достаточно глубокое понимание, что приводит к тому, что в какой-то момент трудно понять, а затем сказать, что Реагировать сложнее использование, но и против человечества Хан, поэтому я собираюсь написать две статьи новичка с точки зрения изучения React, легко запутать время, чтобы написать точку, если у вас есть другое обучение React, очень запутанное для точки, вы можете дать мне сообщение в области сообщений.

Зачем внедрять React

При написании React вы можете написать такой код:

import React from 'react'

function A() {
  // ...other code
  return <h1>前端桃园</h1>
}

Вы, должно быть, задавались вопросом, приведенный выше код не использует React, зачем импортировать React?

если вы положитеimport React from ‘react’Если вы удалите его, вы получите следующую ошибку:

7F6E506E-3025-401D-A492-3B501F8081C6

Итак, где используется этот React, чтобы мы сообщали об ошибке, когда будем внедрять React.Если мы не понимаем причину, то JSX не слишком хорошо ее понимает.

Вы можете произнести приведенный выше код (игнорируя оператор импорта) вонлайн вавилонПреобразуйте его и обнаружите, что babel преобразует приведенный выше код в:

function A() {
  // ...other code
  return React.createElement("h1", null, "前端桃园");
}

Потому что, по сути, JSX предназначен только дляReact.createElement(component, props, ...children)Синтаксический сахар, предоставляемый функциями.

Зачем использовать className вместо class

  1. Первоначальная философия React заключалась в том, чтобы использовать DOM API браузера вместо HTML, потому что JSX — это расширение JS, а не замена HTML, который ближе к созданию элементов. установить на элементclassНужно использоватьclassNameЭтот API:

    const element = document.createElement("div")
element.className = "hello"

  2. Проблема с браузером, до ES5 зарезервированные слова нельзя было использовать в объектах. Следующий код вызовет ошибку в IE8:

    const element = {
  attributes: {
    class: "hello"
  }
}

  3. Проблема деструктурирования, когда вы разрушаете свойства, если вы назначаетеclassПеременные могут ошибаться:

    const { class } = { class: 'foo' } // Uncaught SyntaxError: Unexpected token }
const { className } = { className: 'foo' } 
const { class: className } = { class: 'foo' }

Другие обсуждения можно найти здесь:Интересная тема, почему jsx использует className вместо class

Зачем использовать небольшой верблюжий футляр для атрибутов

Поскольку JSX синтаксически ближе к JavaScript, чем к HTML, React DOM используетcamelCase(маленький верблюжий регистр), чтобы определить имя атрибута без использования соглашения об именах атрибутов HTML.

отВведение в JSX

Зачем вызывать super и передавать реквизиты в конструкторе

Это фрагмент кода с официального сайта, см.:Состояние и жизненный цикл

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

image-20190901222456704

Я не знаю, задумывались ли вы когда-нибудь, почему вы хотите позвонитьsuperи пройтиprops, давайте решим головоломку.

зачем звонить супер

На самом деле это не ограничение React, а ограничение JavaScript.Если this нужно вызывать в конструкторе, то super нужно вызывать заранее.В React мы часто инициализируем состояние в конструкторе.this.state = xxx, поэтому вам нужно позвонить super.

Зачем передавать реквизит

Вы можете подумать, что вам нужно датьsuperвходящийprops,иначеReact.Componentне могу инициализироватьthis.props:

class Component {
  constructor(props) {
    this.props = props;
    // ...
  }
}

Однако, если вы случайно пропуститеprops, звоните напрямуюsuper(), вы все еще можетеrenderи другие способы доступаthis.props(Можете попробовать, если не верите мне).

Почему это работает? потому чтоReact назначит реквизиты объекту экземпляра, только что созданному после вызова конструктора:

const instance = new YourComponent(props);
instance.props = props;

propsЕсть причина, почему это не работает.

Но это означает, что когда вы используете React, вы можете использоватьsuper()заменятьsuper(props)Это?

Это по-прежнему невозможно, иначе официальный сайт не порекомендует вам вызывать реквизит, хотя React будетthis.propsзадание, но вsuper()После вызова и до окончания конструктораthis.propsВсе равно бесполезно.

// Inside React
class Component {
  constructor(props) {
    this.props = props;
    // ...
  }
}

// Inside your code
class Button extends React.Component {
  constructor(props) {
    super(); // 😬 忘了传入 props
    console.log(props); // ✅ {}
    console.log(this.props); // 😬 undefined
  }
  // ...
}

Если метод доступа вызывается в конструктореpropsметод, то ошибку будет труднее обнаружить.Поэтому я настоятельно рекомендую всегда использовать super(props), даже если это не требуется:

class Button extends React.Component {
  constructor(props) {
    super(props); // ✅ We passed props
    console.log(props); // ✅ {}
    console.log(this.props); // ✅ {}
  }
  // ...
}

Приведенный выше код гарантируетthis.propsВсегда иметь ценность.

Если вы хотите избежать вышеуказанных проблем, вы можете пройтипредложение атрибута классачтобы упростить код:

class Clock extends React.Component {
  state = {date: new Date()};

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Подробнее можно посмотретьБлог Дэна

почему компоненты начинаются с заглавной буквы

Как упоминалось ранее и говорилось, JSXReact.createElement(component, props, …children)При условии синтаксического сахара тип компонента:string/ReactClass type, давайте посмотрим, при каких обстоятельствах будет использоваться строковый тип, и при каких обстоятельствах будет использоваться тип ReactClass.

  • Реакция строкового типа будет думать, что он является родным узлом dom
  • Пользовательский компонент типа ReactClass

Например (строка): В jsx мы пишем

<div></div>

При преобразовании в js становится

React.createElement("div", null)

Например (тип ReactClass): В jsx мы пишем

function MyDiv() {
    return (<div><div>)
}
<MyDiv></MyDiv>

При преобразовании в js становится

function MyDiv() {
  return React.createElement("div", null);
}

React.createElement(MyDiv, null);

В приведенном выше примере, если первая буква в MyDiv строчная, следующим образом

function myDiv() {
    return (<div><div>)
}
<myDiv></myDiv>

При преобразовании в js становится

function myDiv() {
  return React.createElement("div", null);
}

React.createElement("myDiv", null);

Поскольку dom myDiv не может быть найден, будет сообщено об ошибке.

постскриптум

Это первая статья в этой серии. Эти вопросы также поднимаются всеми в одной из моих «групп React Exchange», которые легко запутать, когда они впервые изучают реагировать. Следующая статья не является неожиданным ответом на следующие запутанные вопросы, если у вас есть другие вопросы, пожалуйста, оставьте сообщение в области комментариев.

  • Зачем вызывать метод для привязки этого

  • Почему setState вместо прямого this.state.xx = oo

  • почему setState не синхронен

  • Почему рендер должен быть обернут родительским тегом (перед фрагментом)

Я Тао Вэн, фронтендер, который любит думать. Если вы хотите узнать больше о фронтенде, пожалуйста, обратите внимание на мой официальный аккаунт: «Фронтенд Таоюань». Если вы хотите присоединиться к группе по обмену , подпишитесь на официальную учетную запись и ответьте на «WeChat», чтобы привлечь вас. группа

Категории