Ответы пользователя Yustas Alexu по тегу «React»

Стоит ли в реакт приложении пытаться в одном компоненте получать state другого и является ли это безграмотным ходом?

Yustas Alexu @Yuxus

Если компоненты находятся на разных роутах, то есть при отображении компонента Б менятеся URL страницы или его хеш, то это решение не подойдет. Например когда пользователь перейдет на компонент Б по ссылке, стейта компонента А не существует и компонент Б не получит необходимых данных.

Если же оба компонента находятся на одном роуте, то это вполне нормальное решение.

Ответ написан более двух лет назад

Комментировать

А что будет, если не применять оптимизацию в React?

Yustas Alexu @Yuxus

Можно ли написать относительно здоровое нормально функциорующее приложение, без применения этих тулзов, или зависать будет?

Можно. 90% веб-приложений оно нафиг не нужно.

Ответ написан более двух лет назад

1 комментарий

Не работает Babel-loader?

Yustas Alexu @Yuxus

module: {
        rules: [
          {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: [
                  '@babel/preset-env',
                  '@babel/preset-react' // установить этот пакет в dev-dependencies
                ]
              }
            }
          }
        ]
    },

Вообще лучше использовать .babelrc, пример:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "corejs": 3,
        "modules": false,
        "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-optional-chaining"
  ]
}

А в вебпаке просто:

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },

Ответ написан более двух лет назад

Комментировать

Почему не работает useState при клике?

Yustas Alexu @Yuxus

setChosenPicture(fileName);
     setTimeout(() => {
                console.log(chosenPicture);
     }, 5000);

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

const [chosenPicture, setChosenPicture] = useState('');

console.log(chosenPicture) // после обновления стейта в консоль выведется новое значение

const handleShowFloatingPicture = (index, fileName, width, height, element) => {
     setChosenPicture(fileName);
     setTimeout(() => {
                console.log(chosenPicture); // здесь старое значение, потому что функция вызвалась только один раз
                // и на момент вызова там была пустая строка
     }, 5000);
}

Сделать что-то со значением можно через useEffect:

const [chosenPicture, setChosenPicture] = useState('');

useEffect(() => {
  if (chosenPicture) {
    console.log(chosenPicture)
  }
}, [chosenPicture]) // это массив завимостей, useEffect  вызывает свой коллбэк каждый раз при изменении завимостей

const handleShowFloatingPicture = (index, fileName, width, height, element) => {
     setChosenPicture(fileName);
}

Ответ написан более двух лет назад

Комментировать

Где можно изучить Redux?

Yustas Alexu @Yuxus

Если кратко и максимально просто:
Состояние:
Redux это один большой javascript-объект с полями, которые представляют собой стейт - состояние (initial state - начальное состояние), которое может меняться. Эти поля (состояния) запрещено обновлять напрямую.
Редюсеры:
Обновляется состояние с помощью функций которые называются редьюсерами. Это обычные функции, отличие только в том, что они должны быть чистыми. Задача редюсера принять на вход старый стейт и отдать на выход новый стейт (часть стейта). Редьюсер обычно создается под каждое новое поле в стейте.
Таким образом, когда нужно обновить стейт, вызывается редюсер.
Функция dispatch:
Но редюсер тоже вызывается не напрямую, а через функцию dispatch. Функция dispatch вызывается и в нее передается объект называемый экшеном (action).
Экшен:
Action это обычный js-объект, у которого должно быть поле type с типом экшена и другие поля с какими-нибудь данными (обычно поле data).
Этот экшен-объект передается от dispatch в редьюсер. Как редьюсер будет вычислять новое состояние зависит от разработчика. Но обычно редюсер просто смотрит на тип экшена и на его основе и на основе входных данных возвращает новое состояние.

Сам компонент обновляется путем обертывания его в функцию connect. Функция connect пробрасывает нужные поля из стейта в компонент в виде props (mapStateToProps).

Войдите на сайт