aleksand44
@aleksand44

Ререндер — это нормально?

Нормально ли что каждый раз при событии onSubmit на stateless компоненте формы, вызывается его ререндер? Ведь его внешний вид не меняется от поступающих данных из onSubmit.
Под ререндером я имею ввиду что вызывается функция console.log() вызванная из jsx.

import React from 'react';


const sendLoginDataHandler = (props, event) => {
    event.preventDefault();

    let target = event.target;

    const loginData = {
        email:target.querySelector('input[name="email"]').value,
        password:target.querySelector('input[name="password"]').value,
    };
    props.sendLoginData(loginData);
};


const Form = (props) => (
    <form action="" onSubmit={sendLoginDataHandler.bind(null,props)}>
        {console.log(props.authSending)}
        <input
            type="text"
            placeholder="login"
            name="email"
            value={props.login}
            onChange={(e) => {props.changeLogin(e.target.value)}}
        />
        <input
            onChange={(e) => {props.changePassword(e.target.value)}}
            type="text"
            name="password"
            value={props.password}
            placeholder="password"
        />
        <button
            disabled={ props.authSending === 'requested' ? 1 : 0}
            type="submit"
        >
            Залогиниться
        </button>
    </form>
);

export default Form;
  • Вопрос задан
  • 286 просмотров
Пригласить эксперта
Ответы на вопрос 2
rockon404
@rockon404 Куратор тега React
Frontend Developer
Перерисовка срабатывает только потому, что срабатывает перерисовка родительского компонента. Если родитель React.Component, то его перерисовки можно контролировать с помощью метода shouldComponentUpdate.
Ответ написан
Комментировать
mbelskiy
@mbelskiy
Software Developer
Ненормально. Кроме того, в реакт версиях до 16.6 нет инструментов контроля перерисовки для функциональных компонентов.
В класс-компоненте есть два варианта решения вопроса: наследоваться от PureComponent, либо реализовать shouldComponentUpdate. PureComponent стоит использовать только при плоской структуре props/state
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы