Question

我有一个React Video Component渲染：

<video autoPlay loop poster={this.props.poster}>
    <source src={this.props.video} type="video/mp4" />
</video>

作为我的路线的孩子组件：

var Login = require('./containers/Login/Login.jsx');
var ForgotPassword = require('./containers/Login/ForgotPassword.jsx');

[
    <Route path="/login" component={Login} />,
    <Route path="/login/forgot-password" component={ForgotPassword}/>
]

更改路径时，视频组件重新渲染，我在浏览器上看到重新加载闪存，以及视频重新启动。有没有办法避免在路由时重新渲染视频组件？

我设法通过在两个路线中使用相同的组件来使其工作，并通过引用网址进行UI更改。

我在这项工作中丢失了组件事件（componentWillUnmount，componentWillMount等）。

非常感谢任何帮助，感谢

Answer 1

正如我在你的情况下所说，你可以尝试使用 shouldComponentUpdate 方法，但我不确定路由以及它如何与路由一起工作。它需要两个参数 nextProps＆amp; nextState 并返回 true或false ，具体取决于您的逻辑，如果为true，那么您的组件将被重新呈现，否则将不会。所以这是一个例子：

    shouldComponentUpdate(nextProps, nextState){
        console.log('Should Component Update');
        return nextState.count % 5 === 0
    }

在这种情况下，只有在状态除以5时才会呈现。小提琴是here我也使用了ES6语法。

我希望它会对你有所帮助。

由于

Answer 2

更改状态（或道具）后，React组件将始终重新呈现，而不会实现shouldComponentUpdate或使用PreRenderMixin。

如果您有一些重新渲染条件实施shouldComponentUpdate，则只需使用PreRenderMixin。

尝试一下，然后分享您的结果。感谢

react-router html5视频重新渲染

2 个答案: