Реагировать крючки по сравнению с рендером - PullRequest
Новая
       1

Реагировать крючки по сравнению с рендером

1 голос
/ 01 июля 2019

Я довольно новичок, чтобы реагировать и обнаружил, что когда вы начинаете новый проект, варочная панель была немного другой, чем в последнее время. Теперь это происходит примерно так: 

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello world!</h1>
    </div>
  );
}

export default App;

вместо того, что было раньше: 

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello World</h1>
      </div>
    )
  }
}

export default App;

Функция рендера исчезла. Я узнал, что это связано с крючками.

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

Что такое преимущества с хуками по сравнению с рендерингом и классным способом написания компонентов?

Полагаю, это относится и к реагирующим родным ...

Ответы [ 2 ]

1 голос
/ 01 июля 2019

Из React DOCS:

https://reactjs.org/docs/hooks-intro.html

Крючки - это новое дополнение в React 16.8.Они позволяют вам использовать состояние и другие функции React без написания класса.

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

Раньше, чтобы использовать state и иметь доступ к другим функциям, таким как жизненные циклы компонентов, вынеобходимо написать ваши компоненты как класс.С хуками это больше не нужно, и вы получите доступ к state и другим функциям с гораздо более понятным API и синтаксисом, на мой взгляд.Ваш код станет более читабельным.

Из FAQ по крюкам:

https://reactjs.org/docs/hooks-faq.html

Нужно ли переписывать всекомпоненты моего класса?

Нет.Мы не планируем удалять классы из React - мы все должны продолжать отгружать продукты и не можем позволить себе переписывать.Мы рекомендуем попробовать Hooks в новом коде.

Должен ли я использовать Hooks, классы или их комбинацию?

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

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

Охватывают ли хуки все варианты использования для классов?

Наша цель - зацепкиохватить все варианты использования для классов как можно скорее.Нет никаких эквивалентов Hook для необычных жизненных циклов getSnapshotBeforeUpdate и componentDidCatch, но мы планируем добавить их в ближайшее время.

Это рано для Hooks, и некоторые сторонние библиотеки могут быть несовместимыс крючками на данный момент.

1 голос
/ 01 июля 2019

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

Если вы создаете более простые компоненты без состояния, вы можете использовать Функциональные компоненты .Это первая запись в вашем посте: функция, которая возвращает выражение JSX.

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

Оба хорошо описаны в React docs .

...