35 вопросов об интервью React, которые мы должны знать

Автор: Алекс

Переводчик: Front-end Xiaozhi

Источник: dev.to

Чем больше вы знаете, тем больше вы не знаете

Ставьте лайк и смотрите снова, формируйте привычку

эта статьяГитхаб:GitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние статьи с высокими похвалами были классифицированы, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе.

Вопрос 1: Что такое виртуальный DOM?

Темы: Реагировать

Сложность: ⭐

Виртуальный дом (ВДОМ)Это представление истинного DOM в памяти. Представление пользовательского интерфейса сохраняется в памяти и синхронизируется с реальным DOM. Это шаг возникновения между вызовом функции рендеринга и отображением элемента на экране, и вызывается весь процесспримириться.

Вопрос 2: В чем разница между компонентами класса и компонентами-функциями?

Темы: Реагировать

Сложность: ⭐⭐

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

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

разница	функциональный компонент	компонент класса
Здесь`this`	нет	имеют
Есть ли жизненный цикл	нет	имеют
Есть ли государство`state`	нет	имеют

Вопрос 3: Для чего в React используются ссылки?

Темы: Реагировать

Сложность: ⭐⭐

Refsобеспечивает доступ кrenderМетод узла DOM или элемента React, созданного в методе. В типичном потоке данныхpropsЭто единственный способ взаимодействия родительских и дочерних компонентов.Если вы хотите изменить дочерние компоненты, вам нужно использовать новыеprosперерисовать его. Во всем есть исключения. В некоторых случаях нам нужно принудительно изменить дочерние элементы за пределами типичного потока данных. В настоящее время мы можем использоватьRefs.

Мы можем добавитьrefАтрибут для использования, значение этого атрибута является функцией обратного вызова, которая получает в качестве своего первого параметра смонтированный экземпляр базового элемента или компонента DOM.

class UnControlledForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} />
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

осторожность,inputэлемент имеетrefсвойство, значением которого является функция. Эта функция берет фактический элемент DOM ввода и помещает его в экземпляр, чтобы его можно было использовать вhandleSubmitДоступ к нему внутри функции.

Часто неправильно понимают, что его можно использовать только в компонентах класса.refs,ноrefsЕго также можно использовать с функциональными компонентами, используя замыкания в JS.

function CustomForm ({handleSubmit}) {
  let inputElement
  return (
    <form onSubmit={() => handleSubmit(inputElement.value)}>
      <input
        type='text'
        ref={(input) => inputElement = input} />
      <button type='submit'>Submit</button>
    </form>
  )
}

Вопрос 4: Как обрабатывать события в React

Темы: Реагировать

Сложность: ⭐⭐

Чтобы решить проблемы кроссбраузерной совместимости,SyntheticEventэкземпляр будет передан вашему обработчику событий,SyntheticEventЭто кросс-браузерная оболочка событий браузера React, которая также имеет тот же интерфейс, что и собственные события браузера, в том числеstopPropagation()а такжеpreventDefault().

Интересно, что React на самом деле не привязывает события к самим дочерним узлам. React использует один прослушиватель событий для прослушивания всех событий на верхнем уровне. Это хорошо для производительности, а также означает, что React не нужно отслеживать прослушиватели событий при обновлении DOM.

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

Темы: Реагировать

Сложность: ⭐⭐

propsа такжеstateявляются обычными объектами JS. Хотя они оба содержат информацию, влияющую на визуализированный вывод, они функционируют по-разному с точки зрения компонентов. который

stateЭто сам компонент, который управляет данными, контролирует свое состояние и является переменным;
propsпараметр данных, передаваемый извне, неизменяемый;
нетstateназывается компонентом без состояния, который имеетstateназываются компонентами с состоянием;
Многоцелевойprops,бесполезныйstate, то есть написать больше компонентов без состояния.

Вопрос 6: Как создавать рефы

Темы: Реагировать

Сложность: ⭐⭐

Рефы используютсяReact.createRef()создано и переданоrefАтрибуты присоединяются к элементам React. При создании компонентов обычноRefsНазначьте свойства экземпляра, чтобы на них можно было ссылаться во всем компоненте.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

Или используйте это так:

class UserForm extends Component {
  handleSubmit = () => {
    console.log("Input Value is: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} /> // Access DOM input in handle submit
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

Вопрос 7: Что такое компоненты высшего порядка?

Темы: Реагировать

Сложность: ⭐⭐

Компоненты высшего порядка (HOC)это функция, которая принимает компонент и возвращает новый компонент. По сути, это шаблон, полученный из композиционной функции React, называемойчистый компонент, так как они могут принимать любые динамически предоставляемые подкомпоненты, но не изменяют и не дублируют какое-либо поведение во входных компонентах.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

HOC можно использовать для многих из следующих вариантов использования

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

Проблема 8: В вызове конструктора`super`и воля`props`Какова функция передачи в качестве параметра?

Темы: Реагировать

Сложность: ⭐⭐

вызовsuper()Конструктор подкласса нельзя использовать перед методомthisСсылки, а также подклассы ES6. Будуpropsпараметр, переданныйsuper()Основная причина вызова - возможность передать дочерний конструкторthis.propsчтобы получить входящийprops.

передать реквизит

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props);  // { name: 'sudheer',age: 30 }
  }
}

реквизит не прошел

class MyComponent extends React.Component {
  constructor(props) {
    super();
    console.log(this.props); // undefined
    // 但是 Props 参数仍然可用
    console.log(props); // Prints { name: 'sudheer',age: 30 }
  }

  render() {
    // 构造函数外部不受影响
    console.log(this.props) // { name: 'sudheer',age: 30 }
  }
}

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

Вопрос 9: Что такое компонент управления?

Темы: Реагировать

Сложность: ⭐⭐⭐

В HTML элементы формы, такие как<input>,<textarea>а также<select>Обычно поддерживает свое собственное состояние и обновляет его на основе пользовательского ввода. Когда пользователь отправляет форму, значения из вышеуказанных элементов будут отправлены вместе с формой.

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

Вопрос 10: Как React.createElement?

Темы: Реагировать

Сложность: ⭐⭐⭐

вопрос:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
)

Как использовать приведенный выше кодReact.createElementреализовать:

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

Вопрос 11: Скажите, что такое JSX?

Темы: Реагировать

Сложность: ⭐⭐⭐

когдаFacebookКогда они впервые выпустили React, они также представили новый диалект JS.JSX, который встраивает необработанный HTML-шаблон в код JS. Сам код JSX не может быть прочитан браузером и должен использоватьBabelа такжеwebpackи т. д. инструменты для преобразования его в традиционный JS. Многие разработчики могут использовать JSX неосознанно, потому что он интегрирован с React.

class MyComponent extends React.Component {
  render() {
    let props = this.props;  
    return (
      <div className="my-component">
      <a href={props.url}>{props.name}</a>
      </div>
    );
  }
}

Вопрос 12: В соответствии с приведенным ниже кодом вы можете найти две проблемы, верно?

Темы: Реагировать

Сложность: ⭐⭐⭐

См. код ниже:

Отвечать:

1. В конструкторе нетpropsПерейти кsuper, он должен включать следующие строки

constructor(props) {
  super(props);
  // ...
}

2. Слушатели событий (черезaddEventListener()при назначении) имеет неправильную область действия, поскольку ES6 не обеспечивает автоматическую привязку. Так что разработчик может переназначить в конструктореclickHandlerчтобы включить правильные привязки:

constructor(props) {
  super(props);
  this.clickHandler = this.clickHandler.bind(this);
  // ...
}

Вопрос 13: Почему бы просто не обновить`state`Шерстяная ткань?

Темы: Реагировать

Сложность: ⭐⭐⭐

Если вы пытаетесь обновить напрямуюstate, компонент не будет повторно визуализирован.

 // 错误
 This.state.message = 'Hello world';

Нужно использоватьsetState()способ обновленияstate. он отправляет компонентуstateобновление объекта. когдаstateПри изменении компонент отвечает повторным рендерингом:

// 正确做法
This.setState({message: ‘Hello World’});

Вопрос 14: Каковы различные фазы жизненного цикла компонента React?

Темы: Реагировать

Сложность: ⭐⭐⭐

Жизненный цикл компонента состоит из четырех отдельных фаз:

Initialization: На этом этапе компонент готов к установке состояния инициализации и свойств по умолчанию.
Mounting: Компонент реакции готов к монтированию в DOM браузера. Этот этап включаетcomponentWillMountа такжеcomponentDidMountМетоды жизненного цикла.
Updating: на этом этапе компонент обновляется двумя способами, отправляя новые реквизиты и состояние. Этот этап включаетshouldComponentUpdate,componentWillUpdateа такжеcomponentDidUpdateМетоды жизненного цикла.
Unmounting: На данном этапе компонент больше не нужен, он выгружен из DOM браузера. Этот этап включаетcomponentWillUnmountМетоды жизненного цикла.

В дополнение к вышеупомянутым четырем общим жизненным циклам существует также фаза обработки ошибок:

Error Handling: на этом этапе компонент будет вызываться при возникновении ошибки во время рендеринга, в методе жизненного цикла или в конструкторе любого дочернего компонента. Этот этап включаетcomponentDidCatchМетоды жизненного цикла.

Вопрос 15: Каковы методы жизненного цикла React?

Темы: Реагировать

Сложность: ⭐⭐⭐

componentWillMount: выполняется перед рендерингом для конфигурации на уровне приложения в корневом компоненте.
componentDidMount: выполняется после первого рендеринга, где вы можете выполнять запросы AJAX, манипулировать DOM или обновлять состояние, а также устанавливать прослушиватели событий.
componentWillReceiveProps: при инициализацииrenderОн не будет выполнен, когда компонент получит новое состояние (реквизиты) Обычно он используется для повторного рендеринга дочерних компонентов при обновлении состояния родительского компонента.
shouldComponentUpdate: определяет, следует ли обновлять компонент. По умолчанию возвращаетсяtrue. Если вы увереныstateилиpropsПосле обновления компонент перерисовывать не нужно, можно вернутьfalse, что является способом повышения производительности.
componentWillUpdate:существуетshouldComponentUpdateвернутьtrueВыполнить перед определением компонента для обновления.
componentDidUpdate: в основном используется для обновления DOM в ответpropsилиstateИзменять.
componentWillUnmount: используется для отмены любого сетевого запроса или удаления всех прослушивателей событий, связанных с компонентом.

Вопрос 16: Для чего эти три точки (...) используются в React?

Темы: Реагировать

Сложность: ⭐⭐⭐

...Что делать в коде React (с использованием JSX)? как это называется?

<Modal {...this.props} title='Modal heading'  animation={false}/>

Это называется оператором спреда или оператором спреда, например, еслиthis.propsВключатьa：1а такжеb：2,но

<Modal {...this.props} title='Modal heading' animation={false}>

эквивалентно следующему:

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

Нотация расширения подходит не только для этого варианта использования, но также очень удобна для создания новых объектов с большинством (или всеми) свойствами существующих объектов после обновления.stateМы часто делаем это:

this.setState(prevState => {
    return {foo: {...prevState.foo, a: "updated"}};
});

Вопрос 17: Каковы преимущества использования React Hooks?

Темы: Реагировать

Сложность: ⭐⭐⭐

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

Хуки не работают в классах, используя их, мы можем вообще избежать использования методов жизненного цикла, например.componentDidMount,componentDidUpdate,componentWillUnmount. Вместо этого используйте что-то вродеuseEffectТакие встроенные крючки.

Вопрос 18: Что такое React Hooks?

Темы: Реагировать

Сложность: ⭐⭐⭐

Hooks— это новое дополнение в React 16.8. Они позволяют использовать без написания классаstateи другие функции React. С помощью хуков логика с отслеживанием состояния может быть извлечена из компонента, чтобы его можно было независимо протестировать и повторно использовать. Хуки позволяют нам повторно использовать логику с отслеживанием состояния без изменения иерархии компонентов, что упрощает обмен хуками между многими компонентами или с сообществом.

Вопрос 19: Реакция в Реакции`useState()`что это такое?

Темы: Реагировать

Сложность: ⭐⭐⭐

Описано нижеuseState(0)использование:

...
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...

const setCount = () => {
    setCounter(count + 1);
    setMoreStuff(...);
    ...
};

useStateэто встроенный React Hook.useState(0)Возвращает кортеж, в котором первый аргументcountтекущее состояние счетчика,setCounterПредоставляет метод для обновления состояния счетчика.

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

Вопрос 20: Что такое StrictMode в React? ?

Темы: Реагировать

Сложность: ⭐⭐⭐

РеагироватьStrictModeЭто вспомогательный компонент, который может помочь нам написать лучшие компоненты реагирования, вы можете использовать<StrictMode />Обертывает набор компонентов и может помочь нам со следующими проверками:

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

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

Темы: Реагировать

Сложность: ⭐⭐⭐

В JS,thisЗначение изменяется в соответствии с текущим контекстом. При подходе компонентов класса React разработчики часто хотятthisСсылается на текущий экземпляр компонента, поэтому необходимо привязать эти методы к экземпляру. Обычно это делается в конструкторе:

class SubmitButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFormSubmitted: false
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit() {
    this.setState({
      isFormSubmitted: true
    });
  }

  render() {
    return (
      <button onClick={this.handleSubmit}>Submit</button>
    )
  }
}

Вопрос 22: Что такое опорное сверление и как его избежать?

Темы: Реагировать

Сложность: ⭐⭐⭐

При создании приложений React размещайте компоненты на нескольких уровнях, чтобы использовать данные, предоставленные другим вложенным компонентом. Самый простой способ - поставитьpropПереход от каждого компонента слой за слоем, от исходного компонента к глубоко вложенному компоненту, это называетсяprop drilling.

prop drillingОсновным недостатком является то, что компоненты, которые в противном случае не требовали бы данных, становятся излишне сложными и трудными в обслуживании.

чтобы избежатьprop drilling, распространенный метод заключается в использованииReact Context. предоставить данные, определивProviderкомпоненты и разрешать вложенным компонентам передаватьConsumerкомпонент илиuseContextХуки используют контекстные данные.

Вопрос 23: Опишите Flux и MVC?

Темы: Реагировать

Сложность: ⭐⭐⭐

Традиционный шаблон MVC хорошо работает при разделении данных (модель), пользовательского интерфейса (представление и логика (контроллер)), но архитектура MVC часто страдает от двух основных проблем:

Поток данных недостаточно ясен: Каскадные обновления, которые происходят в представлениях, часто приводят к беспорядочной сети событий, которую трудно отлаживать.

отсутствие целостности данных: данные модели могут видоизменяться где угодно, что приводит к непредсказуемым результатам во всем пользовательском интерфейсе.

Сложные пользовательские интерфейсы, использующие шаблон Flux, больше не страдают от каскадных обновлений, любой конкретный компонент React можетstoreПредоставленные данные восстанавливают его состояние. Режим Flux также обеспечивает целостность данных, ограничивая прямой доступ к общим данным.

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

Темы: Реагировать

Сложность: ⭐⭐⭐

Управляемые компонентыявляется компонентом управления React и единственным источником достоверных данных формы.
В неконтролируемых компонентах данные формы обрабатываются DOM, а не компонентами React.

Хотя неуправляемые компоненты обычно легче реализовать, потому что просто используйтеrefsВы можете получить значения из DOM, но обычно рекомендуется предпочитать контролируемые компоненты неконтролируемым.

Основная причина этого в том, что управляемый компонент поддерживает проверку полей «на лету», позволяет условно отключать/включать кнопки, принудительно применять форматирование ввода.

Вопрос 25: Что-то не так с этим кодом?

Темы: Реагировать

Сложность: ⭐⭐⭐⭐

Что не так с этим кодом:

this.setState((prevState, props) => {
  return {
    streak: prevState.streak + props.count
  }
})

Отвечать:

нет проблем. Этот способ редко используется, мы можем передать функцию вsetState, функция получает предыдущийstateстоимость и текущийpropsи возвращает новое состояние. Если нам нужно сбросить состояние на основе предыдущего состояния, рекомендуется использовать этот метод.

Вопрос 26: Что такое React Context?

Темы: Реагировать

Сложность: ⭐⭐⭐⭐

ContextОбеспечивает способ передачи данных через дерево компонентов, что позволяет избежать ручного прохождения на каждом уровне.propsАтрибуты.

Вопрос 27: Что такое React Fiber?

Темы: Реагировать

Сложность: ⭐⭐⭐⭐

Fiber— это новый механизм согласования или повторная реализация основного алгоритма в React 16. Его основная цель — поддержка инкрементного рендеринга виртуального DOM.React FiberЦель состоит в том, чтобы улучшить его применимость для анимации, макетов, жестов, приостановки, прерывания или повторного использования, а также назначить приоритеты для различных типов обновлений, а также новых примитивов параллелизма.

Цель React Fiber — повысить его применимость в таких областях, как анимация, макет и жесты. Его главная особенность — инкрементальный рендеринг: возможность разделить работу рендеринга на куски и распределить их по нескольким кадрам.

Вопрос 28: Как применить проверку на ReactJS Props?

Темы: Реагировать

Сложность: ⭐⭐⭐⭐

Когда приложение работает в режиме разработки, React автоматически проверяет все настройки, которые мы установили для компонента.props, чтобы убедиться, что они имеют правильный тип данных. Для неправильных типов в консоли в режиме разработки создается предупреждающее сообщение, а в рабочем режиме оно отключено из-за влияния на производительность. обязательныйpropsиспользоватьisRequiredОпределенный.

Вот набор предопределенных типов реквизита:

React.PropTypes.string
React.PropTypes.number
React.PropTypes.func
React.PropTypes.node
React.PropTypes.bool

Например, мы определяем следующее для пользовательского компонентаpropTypes

import PropTypes from 'prop-types';

class User extends React.Component {
  render() {
    return (
      <h1>Welcome, {this.props.name}</h1>
      <h2>Age, {this.props.age}
    );
  }
}

User.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired
};

Вопрос 29: В чем разница между использованием конструктора и getInitialState в React?

Темы: Реагировать

Сложность: ⭐⭐⭐⭐

конструктор иgetInitialStateРазница в том,ES6а такжеES5разница в себе. В использованииES6класс, он должен быть инициализирован в конструктореstate, и используяReact.createClassопределение времениgetInitialStateметод.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { /* initial state */ };
  }
}

Эквивалентно:

var MyComponent = React.createClass({
  getInitialState() {
    return { /* initial state */ };
  },
});

Вопрос 30: Как условно добавить свойства к компонентам React?

Темы: Реагировать

Сложность: ⭐⭐⭐⭐

Для некоторых свойств React достаточно умен, чтобы опустить свойство, если переданное ему значение является ложным. Например:

var InputComponent = React.createClass({
    render: function() {
      var required = true;
      var disabled = false;

      return (
        <input type="text" disabled={disabled} required={required} />
      );
    }
});

Результат рендеринга:

<input type="text" required>

Другой возможный способ:

var condition = true;

var component = (
  <div
    value="foo"
    { ...( condition && { disabled: true } ) } />
);

Вопрос 31: Крюки заменят`render props`и компоненты более высокого порядка?

Темы: Реагировать

Сложность: ⭐⭐⭐⭐

как правило,render propsи компоненты более высокого порядка отображают только один дочерний компонент. Команда React считает, что хуки — это более простой способ обслуживать этот вариант использования.

Эти два режима еще имеют место (например, виртуальныйscrollerКомпоненты могут иметь одинrenderItem prop, или компонент визуального контейнера может иметь собственную структуру DOM). Но в большинстве случаев хуков достаточно, и они могут помочь уменьшить вложенность в дерево.

Вопрос 32: Как избежать повторного рендеринга компонентов?

Темы: Реагировать

Сложность: ⭐⭐⭐⭐

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

React.memo(): Это предотвращает ненужный повторный рендеринг функциональных компонентов.
PureComponent: Это предотвращает ненужное повторное рендеринг классов компонентов

Оба эти метода основаны наpropsНеглубокое сравнение , еслиpropsНет изменений, тогда компонент не будет перерисовываться. Хотя оба инструмента очень полезны, поверхностные сравнения приводят к дополнительным потерям производительности, поэтому оба метода могут негативно сказаться на производительности при неправильном использовании.

используяReact Profiler, производительность можно измерить до и после использования этих методов, гарантируя, что данное изменение действительно повышает производительность.

Вопрос 33: Что такое чистая функция?

Темы: Реагировать

Сложность: ⭐⭐⭐⭐⭐

Чистая функция — это функция, которая не имеет зависимостей и не изменяет состояние переменной за пределами своей области видимости. По сути, чистая функция всегда возвращает один и тот же результат при одних и тех же аргументах.

Вопрос 34: При звонке`setState`Когда, реагировать`render`Как это работает?

Темы: Реагировать

Сложность: ⭐⭐⭐⭐⭐

Можем поставить "render«В два шага:

Рендеринг виртуального DOM: когдаrenderКогда метод вызывается, он возвращает виртуальную структуру DOM нового компонента. при звонкеsetState()час,renderбудет вызван снова, потому что по умолчаниюshouldComponentUpdateвсегда возвращайсяtrue, поэтому React не оптимизирован по умолчанию.
Нативный рендеринг DOM: React будет изменять только реальные узлы DOM в виртуальном DOM, а количество модификаций очень мало — это отличная функция React, которая оптимизирует изменения в реальном DOM и делает React быстрее.

Вопрос 35: Как избежать повторного связывания экземпляров в React?

Темы: Реагировать

Сложность: ⭐⭐⭐⭐⭐

Есть несколько распространенных способов избежать связывания методов в React:

1. Определите обработчик событий как встроенную стрелочную функцию.

class SubmitButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFormSubmitted: false
    };
  }

  render() {
    return (
      <button onClick={() => {
        this.setState({ isFormSubmitted: true });
      }}>Submit</button>
    )
  }
}

2. Используйте функцию стрелки для определения методов:

class SubmitButton extends React.Component {
  state = {
    isFormSubmitted: false
  }

  handleSubmit = () => {
    this.setState({
      isFormSubmitted: true
    });
  }

  render() {
    return (
      <button onClick={this.handleSubmit}>Submit</button>
    )
  }
}

3. Используйте функциональные компоненты с хуками

const SubmitButton = () => {
  const [isFormSubmitted, setIsFormSubmitted] = useState(false);

  return (
    <button onClick={() => {
        setIsFormSubmitted(true);
    }}>Submit</button>
  )
};

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

оригинал:Уууу. Просто board.com/blog/react J…

общаться с

Все говорили, что нет проекта писать, я помогу найти проект и приду с подарком.[Учебник] построить.

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Вопрос 1: Что такое виртуальный DOM?

Вопрос 2: В чем разница между компонентами класса и компонентами-функциями?

Вопрос 3: Для чего в React используются ссылки?

Вопрос 4: Как обрабатывать события в React

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

Вопрос 6: Как создавать рефы

Вопрос 7: Что такое компоненты высшего порядка?

Проблема 8: В вызове конструктораsuperи воляpropsКакова функция передачи в качестве параметра?

Вопрос 9: Что такое компонент управления?

Вопрос 10: Как React.createElement?

Вопрос 11: Скажите, что такое JSX?

Вопрос 12: В соответствии с приведенным ниже кодом вы можете найти две проблемы, верно?

Вопрос 13: Почему бы просто не обновитьstateШерстяная ткань?

Вопрос 14: Каковы различные фазы жизненного цикла компонента React?

Вопрос 15: Каковы методы жизненного цикла React?

Вопрос 16: Для чего эти три точки (...) используются в React?

Вопрос 17: Каковы преимущества использования React Hooks?

Вопрос 18: Что такое React Hooks?

Вопрос 19: Реакция в РеакцииuseState()что это такое?

Вопрос 20: Что такое StrictMode в React? ?

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

Вопрос 22: Что такое опорное сверление и как его избежать?

Вопрос 23: Опишите Flux и MVC?

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

Вопрос 25: Что-то не так с этим кодом?

Вопрос 26: Что такое React Context?

Вопрос 27: Что такое React Fiber?

Вопрос 28: Как применить проверку на ReactJS Props?

Вопрос 29: В чем разница между использованием конструктора и getInitialState в React?

Вопрос 30: Как условно добавить свойства к компонентам React?

Вопрос 31: Крюки заменятrender propsи компоненты более высокого порядка?

Вопрос 32: Как избежать повторного рендеринга компонентов?

Вопрос 33: Что такое чистая функция?

Вопрос 34: При звонкеsetStateКогда, реагироватьrenderКак это работает?

Вопрос 35: Как избежать повторного связывания экземпляров в React?

общаться с

Проблема 8: В вызове конструктора`super`и воля`props`Какова функция передачи в качестве параметра?

Вопрос 13: Почему бы просто не обновить`state`Шерстяная ткань?

Вопрос 19: Реакция в Реакции`useState()`что это такое?

Вопрос 31: Крюки заменят`render props`и компоненты более высокого порядка?

Вопрос 34: При звонке`setState`Когда, реагировать`render`Как это работает?