Должны ли мы изменить компонент класса на функциональный компонент, когда мы помещаем состояние в Redux?

Question

Я изучал React и создал два компонента класса, имеющих соответствующие состояния. Затем я узнал о Redux и решил перенести состояния в хранилище Redux. Вопрос состоит в том, «Является ли наилучшей практикой преобразовывать компоненты класса в функциональные компоненты, так как мы получаем состояние через реквизит из магазина redux?»

Answer 1

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

Почему я предпочитаю функциональные компоненты и перехватывает классы:

• Более чистое дерево рендера. Нет компонентов оболочки
• Более гибкий код. Вы можете использовать useEffect для различных изменений состояния, в классах у вас есть только componentDidUpdate для ЛЮБОГО изменения состояния / реквизита
• Вы можете определить свои пользовательские перехватчики, чтобы сохранить ваш код чистым и блестящим

Answer 2

1. ИМХО, да, я предлагаю вам как можно скорее переключиться с компонента на основе класса на функциональный компонент. Возможно, вы не захотите знать, как компоненты на основе классов меня так обидели Я решил go с крючками. Количество компонентов в моем большом проекте теперь превышает 400 (включая как умные, так и немые компоненты) и продолжает расти. Крючки облегчают мою жизнь, продолжают развиваться и поддерживать.

2. Посмотрите на эту полезную статью: https://blog.bitsrc.io/why-we-switched-to-react-hooks-48798c42c7f

По сути, именно так мы и управляем состоянием на основе классов:

Можно упростить до половины строк кода, достигая тех же результатов с функциональным компонентом и useState, useEffect:

Пожалуйста, взгляните также на этот супер полезный сайт: https://usehooks.com/

Существует множество полезных пользовательских хуков от сообщества, которые вы можете использовать. Ниже приведены те, которые я использую все время:

useRouter : Сделайте вашу жизнь проще с реагирующим маршрутизатором. Например:

import { useRouter } from "./myCustomHooks";

const ShowMeTheLocation = () => {
  const router = useRouter();
  return <div>Show me my param: {router.match.params.myDesiredParam}</div>;
}

useEventListener : упростите ваш обработчик событий, не используя componentDidMount и componentWillUnmount для подписки / отмены подписки. Например, у меня есть кнопка, которая должна связать событие нажатия клавиши:

import { useEventListener } from "./myCustomHooks";

const FunctionButton = () => {
  const keydownHandler = event => { // handle some keydown actions };
  const keyupHandler = event => { // handle some keyup actions };

  // just simple like this
  useEventListener("keydown", keydownHandler);
  useEventListener("keyup", keyupHandler);
}

useAuth : аутентифицировать вашего пользователя.

import { useAuth } from "./use-auth.js";

const Navbar = (props) => {
  // Get auth state and re-render anytime it changes
  const auth = useAuth();
  // if user is authenticated, then show user email, else show Login
  return <div>{auth.user? auth.user.email: "Login"}</div>;
}

useRequireAuth : обрабатывать перенаправление вашего пользователя, если он вышел из системы и пытается просмотреть страницу, которая должна требовать его аутентификации. Это составлено из useRouter и useAuth выше.

import { useRequireAuth } from "./myCustomHooks";

// Dashboard is a page that need authentication to view
const Dashboard = () => {
  const isAuth = useRequireAuth();

  // If isAuth is null (still fetching data) 
  // or false (logged out, above hook will redirect)
  // then show loading indicator.
  if (isAuth) {
    return <div>Fetching data, please wait!</div>
  }

  // {...{ isAuth }} is similar to:
  // isAuth={isAuth}
  return <Dashboard {...{ isAuth }} />  
}

Надеюсь, это поможет!

Answer 3

Прежде всего, состояния могут использоваться только в компоненте класса. В последней версии React есть огромное обновление, которое позволяет функциональным компонентам объявлять и использовать состояние с помощью React-Hooks. Поэтому я рекомендую вам лично использовать Class Component, когда вы используете Redux Store. Если вы новичок, используйте функциональный компонент, в котором вы не используете состояние или реквизиты, а просто визуализируете элементы DOM ( Примечание : функциональные компоненты могут принимать реквизиты). Как только вы правильно изучите различия, go с React-Hooks. Я надеюсь, что это помогает!! Удачного кодирования!