Основы функций React

внешний интерфейс JavaScript Element React.js

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

содержание

1. JSX语法
2. 注释
3. React元素
4. 组件
5. 标签属性
6. 元素的子代
7. 状态state
8. Props和State
9. 事件处理
10. key
11. 表单
12. props的类型检查
13. props的默认值
14. 元素的引用
15. 不使用ES6
16. React的特性
17. 性能优化

содержание

1. Синтаксис JSX

  • Правила синтаксического анализа грамматики JSX следующие: теги XML <...> анализируются с помощью правил XML, блоки кода {...} анализируются с помощью правил JavaScript;
  • Я думаю, что в JSX XML можно понимать как буквальный способ создания виртуальных объектов DOM: после компиляции теги XML будут преобразованы в вызовы функций React.createElement();
    Следующие два кода работают точно так же:
    const element = (
    <h1 className="greeting">
    Hello, world!
    </>
 );
    равно:
    const element = React.createElement(
    'h1',
    {className: 'greeting'},
    'Hello, world!'
 );
    Метод React.createElement() сначала выполняет некоторые проверки, чтобы избежать ошибок, а затем возвращает объект, подобный следующему примеру:
     // 注意: 以下示例是简化过的（不代表在 React 源码中是这样）
 const element = {
     type: 'h1',
     props: {
         className: 'greeting',
         children: 'Hello, world'
     }
 };
    Такие объекты называются «элементами React». Он представляет все, что вы видите на экране. React считывает эти объекты для построения модели DOM и обеспечения согласованности содержимого данных.
  • JSX позволяет вставлять переменные JavaScript прямо в шаблон, если переменная представляет собой массив, то все члены массива будут расширены;
  • Если XML в JSX имеет разрывы строк, рекомендуется добавить круглую скобку вне XML, чтобы предотвратить ошибку автоматической вставки точки с запятой;
  • В XML в JSX определите строковые атрибуты тега с помощью кавычек:const element = <div tabIndex="0"></div>;, используя фигурные скобки для определения свойств тега, значениями которых являются выражения JavaScript:const element = <img src={user.avatarUrl}></img>;; Примечание: если вы используете JavaScript с фигурными скобками Не заключайте выражение в кавычки. JSX распознает содержимое кавычек как строки, а не выражения;
  • JSX не позволяет использовать теги без закрытия;
  • Поскольку функции JSX ближе к JavaScript, чем к HTML, XML использует camelCase для определения имен атрибутов вместо имен атрибутов HTML, например: class заменяется на className, а tabindex заменяется на tabIndex;
  • React DOM будет фильтровать все входящие значения по умолчанию перед рендерингом. Это гарантирует, что приложение не может быть атаковано путем внедрения. Все содержимое преобразуется в строку перед рендерингом. Это может эффективно предотвратить атаки XSS (межсайтовый скриптинг);

2. Примечания

Поскольку сущностью JSX является JavaScript, комментарии в JSX по-прежнему являются комментариями JavaScript; чтобы использовать комментарии в XML JSX, вам нужно сначала использовать фигурные скобки.{}создать среду JavaScript, затем в{}Используйте JavaScript комментарии внутри;
Итак, правила для комментариев резюмируются следующим образом:

  1. Комментарии внутри тегов требуют фигурных скобок{}заключать;
  2. Комментарии вне тегов не используют фигурные скобки{};

3. Реагировать на элементы

  • Элемент — это наименьшая единица, из которой состоит приложение React; элемент описывает то, что вы видите на экране, следующим образом:const element = <h1>Hello, world</h1>;;
  • Элементы DOM и различные элементы Реагировать на браузер, который на самом деле является элементом Реагировать на обычные объекты, Реагировать, чтобы гарантировать, что содержимое браузера DOM DOM и элементы Реакции остаются согласованными;
  • Элементы React неизменяемы. После создания элемента его содержимое или атрибуты нельзя изменить. Элемент подобен кадру в анимации, он представляет, как выглядит интерфейс приложения в определенный момент времени. Единственный способ обновить интерфейс — это создать новый элемент и передать его методу ReactDOM.render(), при реальной разработке большинство приложений React вызывают ReactDOM.render() только один раз;
  • При обновлении представления React DOM сначала сравнивает содержимое элементов и обновляет только измененные части в процессе рендеринга;
  • Имя тега JSX определяет тип элемента React; имя тега JSX, начинающееся с нижнего регистра, представляет собственный элемент HTM, встроенный компонент, например<div>или<span>, во время компиляции строка 'div' или 'span' будет передана в метод React.createElement; имя тега JSX, начинающееся с прописной буквы, указывает на компонент React, например<Foo />, во время компиляции он будет скомпилирован в переменную с тем же именем и ссылкой, напримерReact.createElement(Foo), поэтому, если вы используете теги, начинающиеся со всех, например:<Foo />, вы должны сначала объявить переменную с тем же именем, что и имя тега в области видимости, например переменную Foo;
  • Поскольку метод React.createElement вызывается после компиляции JSX, переменные React должны быть сначала объявлены или импортированы в код JSX;
  • Имена тегов JSX могут быть разделены точками на вызовы свойств, например:<MyComponents.DatePicker color="blue" />; но не выражение, например:<MyComponents["DatePicker"] color="blue" />это не правильно;

4. Компоненты

  • Концептуально компонент похож на функцию, которая принимает произвольные входные значения (называемые «props») и возвращает элемент React, который необходимо отобразить на странице;
  • Когда React встречает элемент, который является определяемым пользователем компонентом, он передает все свойства метки метки конструктору компонента в виде единого объекта, называемого «реквизитом»;
  • Внутри компонента нельзя изменять реквизиты;
  • Содержимое между тегами switch элементов-компонентов можно получить через props.children;
  • Компоненты могут быть вложены друг в друга;
  • Единственный способ получить дескриптор экземпляра компонента React вне React — это сохранить возвращаемое значение React.render. В других компонентах вы можете использовать ссылки для получения того же результата;

Как определить компоненты:

  1. Определите компонент с функцией:
    Самый простой способ определить компонент — использовать функцию JavaScript:
    function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
 }
    Эта функция является допустимым компонентом React, который принимает один объект «props» и возвращает элемент React. Мы называем этот тип компонента компонентом, определяющим функцию, потому что это буквально функция JavaScript.
  2. Компоненты определяются классами ES6:
    class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
     }
 }

Отрисовка компонентов

  • Компонент визуализирует себя, вызывая метод рендеринга экземпляра компонента;
  • Каждый компонент также запускает метод рендеринга дочернего компонента для рендеринга дочернего компонента при его рендеринге;
  • Корневой компонент должен добавить себя к указанному элементу Dom с помощью метода ReactDom.render и визуализировать себя;
  • Может быть только одна метка верхнего уровня класса компонента;
  • Если render возвращает null, компонент не будет визуализироваться, но это не повлияет на обратные вызовы методов жизненного цикла компонента;

5. Свойства тега

Существует несколько различных способов указания атрибутов тега в JSX:

  • Используйте выражения JavaScript
    Вы можете передать любое обернутое {} выражение JavaScript в качестве значения атрибута тега, например:<MyComponent foo={1 + 2 + 3 + 4} />, значение выражения в конечном итоге будет присвоено соответствующему атрибуту тега. операторы if и циклы for не являются выражениями в JavaScript, поэтому их нельзя использовать непосредственно в атрибутах тегов;
  • строковая константа
    Строковые константы можно передавать как значения атрибутов тега. Когда вы передаете строковую константу, HTML не экранирует ее, поэтому следующие выражения JSX эквивалентны:
    <MyComponent message="<3" />
<MyComponent message="<3" />
<MyComponent message={'<3'} />
  • По умолчанию Истина
    Если в свойство label не передается значение, по умолчанию оно равно true. Таким образом, следующие два JSX эквивалентны:
    <MyTextBox autocomplete />
<MyTextBox autocomplete={true} />
  • Расширенные свойства
    В JSX вы можете использовать ... в качестве оператора распространения для передачи целых объектов свойств.
    Следующие два компонента эквивалентны:
    function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

6. Дети элемента

В JSX дочерний контент между открывающим и закрывающим тегами передается как props.children, все, что находится между открывающим и закрывающим тегами, может быть чем угодно, если компонент может преобразовать его в React, прежде чем отображать в React понятные вещи;

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

  • Строковые константы: если вы поместите строку между открывающим и закрывающим тегами, props.children будет этой строкой; поскольку HTML не экранируется, вы можете писать JSX как HTML; JSX удаляет пустые строки и пробелы в начале и в конце. Новые строки рядом с тегами также удаляются, а новые строки внутри строковых литералов сжимаются до одного пробела;
  • JSX: между начальными и торцевыми тегами встроены JSX больше элементов;
  • Выражения JavaScript: любое выражение JavaScript, заключенное в {}, может быть передано как дочернее;
  • Функции: функции, заключенные в {}, могут передаваться как дочерние;
  • Boolean, Null и Undefined игнорируются:
    false, null, undefined и true — все допустимые дочерние элементы, но они не будут отображаться напрямую; в то время как дочерние элементы — это некоторые «ложные» значения, предоставляемые React (то есть: в дополнение к false, 0, «», null, undefined и NaN), он будет отображаться;
    Следующие выражения эквивалентны:
    <div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

7. состояние

  • Конструктор — единственное место, где можно инициализировать this.state;
  • Обновление состояния напрямую не приводит к повторному рендерингу компонента, например:this.state.comment = 'Hello';; следует использовать setState() для установки состояния, например:this.setState({comment: 'Hello'});;
  • Обновления состояния могут быть асинхронными; React может объединять несколько вызовов setState() в один вызов для повышения производительности. Поскольку this.props и this.state могут обновляться асинхронно, на их значения не следует полагаться для вычисления следующего состояния, например:
    //错误的示范
this.setState({
    counter: this.state.counter + this.props.increment,
 });
    SetState() следует передавать функцию, а не объект. Функция получит предыдущее состояние в качестве первого параметра, например:
    //正确的示范
this.setState((prevState, props) => ({
    counter: prevState.counter + props.increment
 }));
    В приведенном выше коде используются стрелочные функции, но он работает и для обычных функций;
  • Когда вы вызываете setState(объект параметра), свойства в объекте параметра полностью заменяют соответствующие свойства в this.state;

8. Реквизит и состояния

  • Props — это набор свойств метки экземпляра компонента, он может принимать значения, передаваемые из компонента. Свойства Props не могут быть изменены внутри компонента. Ему могут быть присвоены значения через свойства метки вне компонента, поэтому его можно использовать для назначения компонента снаружи компонента Внутреннее значение прохода;
  • State — это набор внутренних данных экземпляра компонента, значение свойства State может быть изменено внутри компонента, и после каждого изменения будет срабатывать метод рендеринга для рендеринга компонента;
    Свойство метки компонента не нужно определять перед использованием, а свойство внутренних данных State компонента необходимо определять с помощью метода getInitialState перед использованием;

9. Обработка событий

  • Свойства привязки событий React названы в верблюжьем регистре, а не в нижнем регистре.
  • Если вы используете синтаксис JSX, вам нужно передать функцию как обработчик события вместо строки (способ написания элемента DOM); обработчик получает объект события, который является объектом события, синтезированным React в соответствии с W3C. спец., так что не нужно беспокоиться о кросс-браузерной совместимости;
  • Вы не можете предотвратить поведение по умолчанию, возвращая false, вы должны явно использовать preventDefault, чтобы предотвратить поведение по умолчанию;

Пример:

function ActionLink() {

  function handleClick(e) {
    e.preventDefault();
    console.log('已被点击！');
  }

  return (
    <a href="#" onClick={handleClick}>
      点击我
    </a>
  );
}

10. key

  • Ключ должен быть уникальным среди своих братьев и сестер, а не глобально;
  • Ключ будет использоваться как подсказка к React, но не будет передан вашему компоненту, то есть не станет свойством в пропсах;

11. Формы

  • Для элемента textarea в HTML его текстовое содержимое определяется через дочерние узлы (содержимое между тегами переключения), а в React его текстовое содержимое задается через значение атрибута тега;
  • Для тега select в HTML выбранный параметр устанавливается путем установки атрибута тега selected его элемента option option, а в React выбранное значение устанавливается путем установки значения атрибута тега элемента select.
  • Вы можете указать начальное значение для элемента формы, установив для него атрибут метки defaultValue;

12. Проверка типов реквизита

Чтобы ограничить тип свойств компонента, вам необходимо установить свойство propTypes класса компонента;
Образец кода:

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string,
  children: PropTypes.element.isRequired
};

Установив дочернее свойство propTypespropTypes.childrenОграничить входящий дочерний контент;

13. Значение по умолчанию реквизит

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

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// 为属性指定默认值:
Greeting.defaultProps = {
  name: 'Stranger'
};

// 渲染 "Hello, Stranger":
ReactDOM.render(
  <Greeting />,
  document.getElementById('example')
);

14. Ссылки на элементы

Атрибут ref тега элемента принимает функцию обратного вызова, которая выполняется, когда элемент загружается или выгружается; функция обратного вызова принимает элемент параметра,
Когда элемент загружен:
Если элемент является собственным элементом HTML, элемент параметра является экземпляром узла DOM элемента;
Если элемент является компонентом React, элемент параметра является экземпляром элемента React;
Когда элемент выгружен: элемент параметра равен нулю;

Уведомление:

  • Установка ref для функциональных компонентов (компоненты, определенные с помощью функций) не имеет никакого эффекта;
  • Если обратный вызов ref определен как встроенная функция, он будет вызываться дважды во время обновления, сначала с нулевым значением, а затем с экземпляром элемента. Это связано с тем, что при каждом рендеринге создается новый экземпляр функции. Поэтому React нужно очистить старую ссылку и установить новую;

15. Не использовать ES6

Выше приведен компонент React, созданный с использованием синтаксиса ES6.Конечно, его также можно создать с использованием функций синтаксиса ES5 и ниже, как показано ниже:

использоватьcreate-react-classМодули создают классы компонентов вместо ES6, использующего класс для создания классов компонентов:

var createReactClass = require('create-react-class');
var Greeting = createReactClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

Интерфейс, связанный с классами, в ES6 очень похож на метод createReactClass со следующими отличиями:

  1. Объявите свойства по умолчанию:
    • Если вы используете ключевое слово class для создания компонента, вы можете напрямую записать настраиваемый объект свойства в свойство defaultProps класса;
    • Если вы используете метод createReactClass для создания компонента, вам необходимо определить метод getDefaultProps в объекте конфигурации и вернуть в этом методе объект, содержащий настраиваемые свойства;
  2. Установите начальное состояние:
    • Если вы используете ключевое слово class для создания компонента, вы можете определить начальное состояние компонента, присвоив значение this.state в конструкторе;
    • Если вы используете метод createReactClass для создания компонента, вам нужно написать дополнительный метод getInitialState и позволить этому методу вернуть начальное свойство, которое вы хотите определить;
  3. Автоматическая привязка:
    • Для компонентов React, созданных с помощью ключевого слова class, методы в компоненте не привязываются автоматически к this . Точно так же с экземплярами, сгенерированными классами ES6, методы экземпляра не будут связываться с этим. Поэтому вам нужно вручную добавить .bind(this) к методу в конструкторе;
    • Если вы используете метод createReactClass для создания компонента, метод в компоненте будет автоматически привязан к экземпляру, нет необходимости добавлять .bind(this);

16. Возможности React

  1. JSX использует прописные и строчные конвенции, чтобы различать, является ли тег определенным классом компонента или нативный HTML-тег;
  2. Поскольку JSX — это JavaScript, некоторые идентификаторы (например, class и for) нельзя использовать в качестве имен атрибутов тегов XML. В JSX используйте className, чтобы заменить атрибут class тега XML, и htmlFor, чтобы заменить атрибут for XML;
  3. Фигурные скобки в XML в JSX{}нельзя использовать в выраженияхif elseможно использовать условные выражения (тернарные операции条件?值1: 值2)заменять;
  4. Может быть только одна метка верхнего уровня класса компонента;
  5. Каждый раз, когда метод this.setState вызывается для изменения значения состояния, метод this.render будет вызываться для визуализации компонента;

17. Оптимизация производительности

  • Хотя реквизиты задаются самим React, а состояние используется для хранения состояния, если вам нужно сохранить что-то, что не используется для визуального вывода, рекомендуется сохранять вручную, добавляя соответствующие свойства к классу или экземпляру вместо применения состояния и реквизит для хранения;
  • Если в методе-ловушке компонента shouldComponentUpdate возвращается false, React не будет выполнять проверку изменений и рендеринг для компонента и его подкомпонентов.Поэтому, если компонент не нуждается в обновлении, пусть метод-ловушка shouldComponentUpdate возвращает false;
  • потому чтоReact.PureComponentКомпоненты типа используют поверхностное сравнение, чтобы определить, есть ли изменение при проверке изменений, поэтому производительность выше, поэтому: для компонентов, которые не должны выполнять глубокое сравнение, предпочтительно использоватьReact.PureComponentвместоReact.Componen;
  • Разумное использование ключей;
Категории