Пользователь пока ничего не рассказал о себе

Наибольший вклад в теги

Все теги (10)

Лучшие ответы пользователя

Все ответы (15)
  • Когда использовать useCallback, useMemo и useEffect?

    @LEXA_JA
    useEffect - это хук, который позволяет использовать сайд эффект. В классах его аналогом было использование componentDidMount, componentDidUpdate и componentWillUnmount. В нем можно делать подписки, отправлять запросы управлять анимацией и т. д.
    const [data, setData] = useState(null);
    
    useEffect(() => {
      const controller = new AbortController()
      fetchData(controller.signal).then(setData)
    
      return () => controller.abort()
    }, [fetchData, setData])


    useCallback и useMemo предназначены для оптимизации. useCallback получает на функцию и массив аргументов, и возвращает одну и туже функцию, до тех пор, пока аргументы не изменились. useMemo отличается тем, что он возвращает не саму функцию, а результат её выполнения. По большому счету они являются взаимозаменямыми.
    Таким образом, useMemo используется для сохранения результатов тяжёлых вычислений, например обработка массива.
    const data = useMemo(() => array.map(mapper).filter(predicate).reduce(reducer), [array])

    А useCallback используется, когда важна постоянность ссылок на функцию. Например, когда мы передаём ссылку в компонент, который использует React.PureComponent или React.memo, или, когда функция используется в качестве аргумента в других хуках
    const handler = useCallback(() => {
      // что-то сделать 
    }, [])
    
    useEffect(() => {
      handler(value)
      // если не использовать useCallback, эффект будет срабатывать постоянно 
    }, [handler, value])
    Ответ написан
    1 комментарий
  • Узнать что другое окно закрыли?

    @LEXA_JA
    Ответ написан
    Комментировать
  • Много ли на фронтенде бизнес логики?

    @LEXA_JA
    Это сильно зависит от проекта. На каких-нибудь обычных сайтах, вроде блогов или интернет-магизинов, на фронте может вообще не быть никакой логики или самый минимум. С другой стороны существуют и полноценные веб-приложения, где логики на фронте довольно много. Особенно когда используется подход со бэком без состояния, состояние хранит клиент, и соответственно, именно клиент отвечает за бизнес логику.
    Ответ написан
  • Как изменить state у всего списка элементов, кроме одного в React?

    @LEXA_JA
    Нужно поднять состояние в родителя:

    this.state = {
        openedServiceFormIndex: -1,
      };
    
      clickServiceCard(index) {
        this.setState(
          prevState => {
            if (index === prevState.openedServiceFormIndex) {
              return {
                openedServiceFormIndex: -1,
              }
            } else {
              return {
                openedServiceFormIndex: index,
              }
            }
          }
        );
      }
    
      render() {
      <div className="service-list">
              {serviceCards.map((card, index) => {
                return (
                  <React.Fragment key={"service-card" + index}>
                    <ServiceCard
                      opened={index === this.state.openedServiceCardIndex}
                      clickServiceCard={() => this.clickServiceCard(index)}
                      extraClass="service-list__card"
                    />
                  </React.Fragment>
                );
              })}
    </div>
      }


    И убрать из карточки

    render() {
      return (
               <div className={cn("service-card", { "--opened": this.props.opened})}>
                    <button 
                         className="service-card__btn" 
                         onClick={this.props.clickServiceCard}
                    >
                       Кнопка
                   </button>
               </div>
             )}
    }
    Ответ написан
    1 комментарий
  • Как сделать так чтобы работала обработка Отмены запроса?

    @LEXA_JA
    Как один из вариантов, можно добавить это в класс.

    Request0() {
        // this.abort()
        // можно делать это тут, если запрос должен быть только один, а можно в useEffect
        this.abortController = new AbortController()
        
        // fetch
    
        finally {
          this.abortController  = null
        }
      }
    
      abort() {
        if (this.abortController) {
          this.abortController.abort();
          this.abortController = null
        }
      }
    Ответ написан
    2 комментария