react-router html5视频重新渲染答案

【问题标题】：react-router html5 video re-renderingreact-router html5视频重新渲染
【发布时间】：2016-02-20 10:58:18
【问题描述】：

我有一个 React 视频组件，它呈现：

<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}/>
]

当更改路由时，视频组件会重新渲染，我会在浏览器上看到重新加载 flash，同时视频会重新启动。有什么方法可以避免在路由时重新渲染视频组件？

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

我失去了解决此问题的组件事件（componentWillUnmount、componentWillMount 等）

将不胜感激任何帮助，谢谢

【问题讨论】：

可能你正在寻找 shouldComponentUpdate 方法Link is here
很难弄清楚 * shouldComponentUpdate*... 的 es6 语法，感谢您的帮助
我添加了一个答案，您可以查看它。

标签： reactjs html5-video react-router

【解决方案1】：

正如我在您的案例中所说，您可以尝试使用 shouldComponentUpdate 方法，但我不确定路由以及它如何与路由一起使用。它需要两个参数 nextProps & nextState 并根据您的逻辑返回 true 或 false，如果它为 true，那么您的组件将被重新渲染，否则不会。所以这里是一个例子：

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

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

希望对你有帮助。

谢谢

【讨论】：

我应该将此函数添加到 VideoComponent 类，对吗？无论如何，尝试它没有运气。任何救世主的 jsfiddle 示例都会很棒：D

【解决方案2】：

当状态（或道具）发生变化时，React 组件总是会重新渲染，而无需实现 shouldComponentUpdate 或使用 PreRenderMixin。

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

试试看，然后分享你的结果。谢谢

【讨论】：

我厌倦了这两种方法，但都没有运气。还尝试了 gaearon/react-pure-render。你能指导我使用 es6 实现 shouldComponentUpdate 吗？