Невозможно предотвратить повторное рендеринг с помощью shouldComponentUpdate () или PureComponent - PullRequest
Новая
       21

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

0 голосов
/ 15 марта 2019

В /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.log("test");
    return false;
}

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

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

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

1 Ответ

0 голосов
/ 15 марта 2019

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

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

Что-то вроде: 

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

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

...