Question

我正在使用优秀的create-react-app工具来构建应用。我的问题与标题所暗示的一样微不足道，但我无法修复它。我在github上发布了一个简单的应用来说明：

https://github.com/diarmuidoconnor/reactdemo

相关的摘录如下：

路由配置为：

     <Router history={browserHistory} >
        <Route path="/" component={App}>
           <IndexRoute component={Foo}/>
           <Route path="bar" component={Bar} />
        </Route>
      </Router>

Bar组件代码是：

 var Bar = React.createClass({
      componentWillUnmount: function() {
         localStorage.setItem('view', 2) ;
      },
      componentWillMount: function() {
           console.log('mounting') ;
          localStorage.setItem('view', 1) ;

       },

    render: function(){
         return (  
          <div>
            <h1>Bar </h1>
          </div>
        );
    }
  });

如您所见，它具有componentWillMount和componentWillUnmount生命周期方法。当我导航到/ bar时调用前者（localStorage具有正确的值，1，用于视图键）但后者不是当我移动到不同的URL（/）时 - 视图键的localStorage值未更改为2 ，正如我所料。它仍然是1。

我的环境

OSX 10.9
node v4.2.2
npm 2.14.7
Chrome版本53.0.2785.143

Answer 1

我猜你正在手动更改网址以在路线之间导航。通过这样做，你将看不到你想要达到的目标。你必须通过应用程序导航来完成它。

添加带有这两个链接（App和Bar）的标题，并使用react的“Link”进行导航。

但在这里我只是在条形页面添加主页链接。

import React from 'react';
import { IndexLink } from 'react-router';

var Bar = React.createClass({
    componentWillUnmount: function() {
        console.log('unmounting') ;
        localStorage.setItem('view', 2) ;
    },
    componentWillMount: function() {
        console.log('mounting') ;
        localStorage.setItem('view', 1) ;
     },
     render: function(){
         return (
             <div>
             <h1>Bar </h1>
             <IndexLink to="/" activeClassName="active">Home</IndexLink>
         </div>
     );
  }
});

export default Bar;

这足以检查'componentWillUnmout'功能。

Answer 2

在不再需要组件时调用componentWillUnmount函数，如果更改路由并且新路由上也需要该组件，则它将不会卸载。

如果您直接加载页面或使用锚标记而不是链接，它将加载一个新页面，因此不需要卸载，因为它等同于第一次打开页面。

现在，在您的情况下，我没有看到任何链接组件，因此您必须直接打开URL，因此无需卸载

在路由更改时未调用ReactJS componentWillUnmount

2 个答案: