Мухаммад Умайр

Основной Реагировать

Вопрос №1: Что такое React?

React — это интерфейсная библиотека JavaScript с открытым исходным кодом, которая используется для создания пользовательских интерфейсов, особенно для одностраничных приложений. Он используется для обработки слоя представления для веб-приложений и мобильных приложений. React был создан Джорданом Уоке, инженером-программистом, работающим в Facebook. React был впервые развернут в ленте новостей Facebook в 2011 году и в Instagram в 2012 году.

Вопрос № 2: Каковы основные особенности React?

Основные особенности React:

  • Он использует VirtualDOM вместо RealDOM, учитывая, что манипуляции с RealDOM обходятся дорого.
  • Поддерживает рендеринг на стороне сервера.
  • Следует однонаправленному потоку данных или привязке данных.
  • Использует повторно используемые/компонуемые компоненты пользовательского интерфейса для разработки представления.

Вопрос № 3: Что такое JSX?

  1. JSX — это XML-подобное расширение синтаксиса для ECMAScript (сокращение от JavaScript XML). По сути, он просто обеспечивает синтаксический сахар для функции React.createElement(), давая нам выразительность JavaScript вместе с синтаксисом шаблона, подобным HTML.
  2. В приведенном ниже примере текст внутри <h1> тега возвращается как функция JavaScript в функцию рендеринга.
jsx harmony class App extends React.Component { 
render() {
return(    
<div>      
<h1>{'Welcome to React world!'}</h1>    
</div>  
)
}}

Вопрос № 4: В чем разница между элементом и компонентом?

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

Объектное представление React Element будет следующим:

const element = React.createElement( 'div', {id: 'login-btn'}, 'Login' )

Приведенная выше React.createElement() функция возвращает объект:

{ type: 'div', props: { children: 'Login', id: 'login-btn' } }

И, наконец, он рендерится в DOM с помощью ReactDOM.render():

<div id='login-btn'>Login</div>

В то время как component может быть объявлен несколькими различными способами. Это может быть класс с методом render() или он может быть определен как функция. В любом случае он принимает props в качестве входных данных и возвращает дерево JSX в качестве вывода:

const Button = ({ onLogin }) => <div id={'login-btn'} onClick={onLogin}>Login</div>

Затем JSX транспилируется в дерево функций React.createElement():

const Button = ({ onLogin }) => React.createElement( 'div', { id: 'login-btn', onClick: onLogin }, 'Login' )

Вопрос № 5: Как создавать компоненты в React?

Существует два возможных способа создания компонента.

Функциональные компоненты. Это самый простой способ создания компонента. Это чистые функции JavaScript, которые принимают объект реквизита в качестве первого параметра и возвращают элементы React:

jsx harmony  function Greeting({ message }) {
    
return <h1>{Hello, ${message}`}</h1>}

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

jsx harmony class Greeting extends React.Component { render() {return <h1>{`Hello, ${this.props.message}`}</h1>} }

Вопрос № 6: Когда использовать компонент класса вместо функционального компонента?

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

Вопрос № 7: Что такое чистые компоненты?

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

Вопрос № 8: Что такое состояние в React?

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

  1. Давайте создадим пользовательский компонент с состоянием сообщения,
jsx harmony
class User extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      message: 'Welcome to React world'
    }
  }
  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
      </div>
    )
  }
}

![state](images/state.jpg)
State is similar to props, but it is private and fully controlled by the component ,i.e., it is not accessible to any other component till the owner component decides to pass it.

Вопрос № 9: Что такое props в React?

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

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

Передайте пользовательские данные в ваш компонент.

Изменения состояния триггера.

Используйте via this.props.reactProp внутри метода render() компонента.

Например, создадим элемент со свойством reactProp:

jsx harmony <Element reactProp={‘1’} />
This `reactProp` (or whatever you came up with) name then becomes a property attached to React's native props object which originally already exists on all components created using React library.
props.reactProp

Вопрос № 10: В чем разница между состоянием и реквизитом?

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