无法使用 shouldComponentUpdate() 或 PureComponent 阻止重新渲染

Question

在 /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>
            );
    }
}

我试图在 shouldComponentUpdate() 中 return false 但它甚至没有被调用 :

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

我尝试为 <IframeYoutubeComponent/> 使用 PureComponent，但当 <logForm/> 弹出时视频仍然重新加载。

我尝试将密钥添加到我的组件中，还尝试将 this.state.logsign 放入 Redux 但没有成功。

我从 2 个月开始就开始做出反应，所以我可能会漏掉一些明显的东西，但我找不到什么……有什么想法吗？

Answer 1

那是因为您将 component 属性中的箭头函数传递给 Route。每次生成新函数时都这样。

你应该在这个 prop 中传递一个 React 组件，或者至少传递一个 returns JSX 的函数，但是这个函数应该被定义一次。例如作为 class 方法。

类似于：

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

但是当然你必须重构关于这个 logsign prop 的逻辑。

无法使用 shouldComponentUpdate() 或 PureComponent 阻止重新渲染

Unable to prevent rerender with shouldComponentUpdate() or with PureComponent

iframe

rerender

reactjs

react-router