无法使用 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() 中返回 false，但它甚至没有被调用：

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

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

我尝试向我的组件添加密钥，还尝试将this.state.logsign 放入Redux，但没有任何结果。

我从 2 个月开始做出反应，所以我可能会错过一些明显的东西，但我不知道是什么……有什么想法吗？

Answer 1

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

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

类似：

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

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