Невозможно предотвратить повторную визуализацию с помощью shouldComponentUpdate() или PureComponent

В /home/:id у меня есть <LogButtons/>, когда он нажимается, logOn() вызывается, поэтому logsignPopUp переменная становится <logForm/> компонентом.

На той же странице у меня есть <IframeYoutubeComponent/>, я хочу предотвратить его повторную визуализацию, когда <logForm/> появляется на экране, поэтому видео не перезагружается.

home.js:

export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = { logsign: "" };
        this.logOn = this.logOn.bind(this);
        this.signOn = this.signOn.bind(this);
    }

    logOn() {
        this.setState({ logsign: "log" });
    }

    render() {

        let logsignPopUp = this.props.logsign === "log" ? <LogForm/> : this.state.logsign;

        let homePage =
        <div>
            {logsignPopUp}
            <div>
                <LogButtons logOn = {this.logOn}/>
            </div>
            <div>
                <IframeYoutubeComponent paramsId = {this.props.match.params.paramsId}/>
            </div>
        </div>;

    return (
        <div>
            <Route exact path = "/home/:id" component = {() => <div>{homePage}</div> } />
        </div>
    );
  }
}

iframeYoutubeComponent.js:

export class IframYoutubeComponent extends Component {
    render() {
        //this.props.youtube come from Redux state
        let src = this.props.youtube.find(el => el.youtubeId === this.props.paramsId);
            return (
                <iframe src = {"https://www.youtube.com/embed/" + src}></iframe>
            );
    }
}

Я пытался вернуть false в shouldComponentUpdate(), но он даже не вызывается:

shouldComponentUpdate() {
    console.info("test");
    return false;
}

Я пытался использовать PureComponent для <IframeYoutubeComponent/>, но видео все еще перезагружается, когда появляется <logForm/>.

Я пытался добавить ключ к своим компонентам, а также пытался вставить this.state.logsign в Redux, но ничего не вышло.

Я начал реагировать с 2 месяцев, поэтому я могу пропустить что-то очевидное, но я не могу понять, что... Есть идеи?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
331
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это потому, что вы передаете функцию стрелки в реквизите component в Route. Таким образом, каждый раз, когда вы создаете новую функцию.

Вы должны передать компонент реакции в этом свойстве или, по крайней мере, функцию, которая возвращает JSX, но эта функция должна быть определена один раз. Например, как метод класса.

Что-то типа:

<div>
  <Route exact path = "/home/:id" component = {this.renderHomePage} />
</div>

Но тогда, конечно, вам придется реорганизовать свою логику в отношении этой logsign опоры.

Я создал компонент homePage вместо моей переменной homePage, и видео в компоненте Iframe не перезагружается, это прекрасно! Мне даже не нужен shouldComponentUpdate() или что-то в этом роде. Большое спасибо, вы спасли мой день :)

DevAb 15.03.2019 03:23

Другие вопросы по теме