Подробное знание React JS

React - это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов. Он позволяет составлять сложные пользовательские интерфейсы из небольших и изолированных фрагментов кода, называемых «компонентами».

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

Например: Попросите друга сделать уроки, он или она это сделает, вам все равно.

REACT - ЭТО ДЕКЛАРАТИВНОЕ ПРОГРАММИРОВАНИЕ. ОС НА РАЗРАБОТКУ ПРИЛОЖЕНИЯ У РАЗРАБОТЧИКА ТРЕБУЕТСЯ МЕНЬШЕ ВРЕМЕНИ.

Что такое виртуальный DOM?

Виртуальная модель DOM - это любое представление реальной модели DOM. Виртуальная модель DOM позволяет избежать ненужных изменений в модели DOM. React создает дерево настраиваемых объектов при визуализации любого клиента (например, браузера, мобильного приложения с использованием React).

Экземпляр создания фактического элемента DOM, он создает объект DOM и объект Sub DOM в дереве. Когда какое-либо изменение происходит в результате события или действия, React очень быстро изменяет свою DOM (виртуальную DOM), не касаясь фактической или реальной DOM.

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

Порядок работы Virtual DOM в REACT

Создайте виртуальную модель DOM с новым состоянием
Сравните его со старым виртуальным DOM, используя алгоритм дрейфа
Обновлять только разные узлы в React DOM
Назначьте новый виртуальный DOM как старый виртуальный DOM

В более ранней процедуре использования Javascript для визуализации объекта на клиенте «найти объект DOM → управлять объектом DOM → заменить объект DOM или повторно визуализировать объект DOM» является тяжелым процессом, он может замедлить работу веб-сайта на клиенте или браузере. И Virtual DOM не использует эту процедуру. Процесс Virtual DOM легкий, быстрый и простой, поэтому он обеспечивает лучшую и более быструю производительность, чем другие фреймворки.

REACT JS, ИСПОЛЬЗУЯ ВИРУТНЫЙ ДОМ, ЧТОБЫ ПРЕДОСТАВИТЬ ЭТО КОМПОНЕНТ КЛИЕНТУ

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

Что такое Pure Function?

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

Побочные эффекты включают в себя создание HTTP-запроса, мутацию, консольную печать, манипуляцию с DOM. Одним из основных преимуществ использования чистых функций является их немедленная проверка. Они всегда будут давать один и тот же результат, если вы передадите одни и те же аргументы. Пример чистой функции.

const add = (x, y) => x + y // A pure function

Вам необходимо знать базовый синтаксис ofes6 для написания кода на response js.

Что такое ES6?

ECMAScript (ES) - это спецификация языка сценариев, стандартизированная ECMAScript International. Он используется приложениями для включения сценариев на стороне клиента. Эта спецификация регулирует такие языки, как JavaScript, Jscript и ActionScript. В этом руководстве вы познакомитесь с реализацией ES6 на JavaScript.

Простой пример запуска проекта React

В целях обучения я буду использовать create-react-app шаблон, чтобы дать базовое представление о компоненте реакции и о том, как они работают:

Добавьте create-react-app в командную строку как глобальный пакет с помощью командной строки или терминала с помощью

Using npm package manager:
> npm install -g create-react-app
Using yarn package manager
> yarn add global create-react-app

Создайте новый проект React JS с помощью командной строки

> create-react-app react-js-in-depth

Основная концепция react js - разработка на основе компонентов. React JS имеет два типа component: один - интеллектуальный или контейнерный компонент, а другой - дамп или презентационный компонент. Разработчик должен знать о тех типах компонентов, какие типы компонентов необходимы для каких целей.

Перейдите в папку проекта react-js-in-depth и откройте проект с помощью vscode и atom или любого другого редактора кода, который вам удобен:

Создание структуры проекта приложения React

|--| react-js-in-depth
|----| node_modules (React JS and Node JS related packages)
|----| public (Static file to serve for React Website)
|----| components (Custom Component Folder created for Learning)
|------| DumpComponent.js
|------| SmartComponent.js
|----| src (React Source Folder For Development)
|------| App.js (Main Component for React JS generate by React)
|------| index.js (Entry Point for React Application)
|----| package.json (Record for node package with json format)

Вся структура папок автоматически генерируется create-react-app. в целях обучения я создал папку components. Затем я создал два файла с именами DumpComponent и SmartComponent. Компонент дампа и интеллектуальный компонент - важная функция для React JS.

Дамп или презентационный компонент

Этот тип компонентов используется только для представления чего-либо в DOM. Он не несет ответственности за изменение бизнес-логики, это означает, что у этого типа компонента нет состояния. у него нет управления состоянием для изменения состояния компонента. у него есть только метод render () и часто это просто функция Javascript. Он не знает, как изменить данные, которые он представляет, если его попросят. это я привожу пример компонента dump or presentational ниже.

import React from 'react'
const DumpComponent = (props) => { 
  return (
     <div> 
        <h1> This is an example of Dump Component </h1>
     </div>
  )
}
export default DumpComponent

В этом синтаксисе кода имя компонента DumpComponent, если он работает только с функцией render(), поэтому мы можем написать код с помощью оператора return. import React from 'react' важен, потому что без него узел не определяет, работает ли он для react компонента. Этот компонент не содержит только презентационную информацию.

Умный или контейнерный компонент

Этот тип компонентов связан с тем, как все работает. он содержит как дамп, так и еще один умный компонент. Он содержит бизнес-логику и имеет функции управления состоянием для изменения состояния компонента. он может иметь функцию обратного вызова или функцию ajax для обслуживания данных, иногда интеллектуальный компонент, называемый компонентом с полным состоянием. это также помогает приложению подключаться к инструментам управления состоянием redux, mobex или Flux. Большая часть Компонента использует функцию class. Пример смарт-компонента:

import React, {Component} from 'react'
class SmartComponent extends Component {
  constructor(props){
    super(props)
    this.state = { 
      list: [], 
      message: null
    }  
  }
  render() {
    return(
     <div>
       <h2>This is Smart Component</h1>
       <p>{this.state.message}</p>
     </div>
    )
  }
}
export default SmartComponent

React имеет класс компонентов, в котором есть предопределенные методы. Разработчику необходимо расширить класс компонентов, чтобы получить smart component функции.

конструктор

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

`props`

this.props для интеллектуального компонента и props для фиктивного компонента содержит компоненты properties и его value, которые необходимы для render и re-render компонента. В частности, this.props.children - это специальная опора, обычно определяемая дочерними тегами в выражении JSX, а не в самом теге.

Действительный компонент React принимает один «реквизит». «Реквизит» означает «недвижимость».

`state`

Состояние содержит данные, относящиеся к этому компоненту, которые могут изменяться со временем. Состояние определяется пользователем, и это должен быть простой объект JavaScript. Если какое-то значение не используется для рендеринга или потока данных, разработчику не нужно помещать его в состояние. Никогда не изменяйте this.state напрямую. Разработчик должен вызвать setState() для изменения и изменить state компонента. И не использовать setState() в render() функции компонента. Относитесь к this.state как к неизменяемому. Пример есть

this.setState({quantity: 2})

Чтобы узнать о Reac JS компоненте. Разработчик должен знать о жизненном цикле компонента React:

Монтаж

Монтаж - это начальный шаг для создания реагирующего компонента. при вызове этого метода создается экземпляр компонента, который затем вставляется в дерево DOM. методы требуют монтирования компонента:

constructor() → static getDerivedStateFromProps() → render()

getDerivedStateFromProps() будет вызываться перед методом render (), этот метод должен возвращать объект для обновления состояния или null, чтобы ничего не обновлять. этот метод не будет доступен в классе экземпляра. он будет срабатывать каждый раз при рендеринге компонента.

Обновление

Обновление может изменить свойства или состояние компонента. Порядок вызова метода для обновления и повторного рендеринга компонента React приведен ниже:

getDerivedStateFromProps() →shouldComponentUpdate() →render() →getSnapshotBeforeUpdate() →componentDidUpdate() →componentDidMount()

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

getSnapshotBeforeUpdate() вызывается непосредственно перед фиксацией последнего отрендеренного вывода. Он позволяет вашему компоненту захватывать некоторую информацию из DOM, прежде чем она будет потенциально изменена. Любое значение, возвращаемое этим жизненным циклом, будет передано в качестве параметра componentDidUpdate().

componentDidUpdate() метод не вызывается для первоначального рендеринга. Это хорошее место для выполнения сетевых запросов, если вы сравниваете текущие реквизиты с предыдущими.

componentDidUpdate(prevProps) {
  // don't forget to compare props:
  if (this.props.changeName !== prevProps.userName) {
    this.fetchUserData(this.props.changeName);
  }
}

componentDidUpdate() не будет вызываться, если shouldComponentUpdate() вернет false.

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

componentDidMount () {
  // Get Id from Query Param  
   const userId = this.props.params.id 
  // Network Call for Get user Info 
   userId && this.props.fetchUserInfo({userId})
}

Размонтирование

componentWillUnmount() - это вызов, когда компонент размонтирован и уничтожен. Эта функция используется для выполнения любой необходимой очистки компонента до его уничтожения, например, для аннулирования таймеров, отмены сетевых запросов или очистки любых подписок, созданных в componentDidMount().

componentWillUnmount () {
  const {clearSearch} = this.props
  clearSearch()
  this.setState({firstName: null, lastName: null})
}

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