组件是否应该在 redux/react-router v4 中更新

Question

我正在将属性从我的 "Root" 传递到我的反应路线 "Home"。

当我的应用程序的 "state" (state.loggedIn) 发生变化时，"Home" 会更新（外观会按预期变化）但不会调用 "shouldComponentUpdate"。

我想使用 "shouldComponentUpdate" 来检测属性 ("loggedIn") 是否在根目录中发生了变化，并做一些额外的工作。

// Root.js
import {Provider} from 'react-redux';
import {
  BrowserRouter as Router,
  Redirect,
  Route,
  Switch} from 'react-router-dom';

...

render() {
  const store = this.props.store;
  const loggedIn = this.state.loggedIn;
  const handleLogin = this.handleLogin;
  const handleLogout = this.handleLogout;

  return (
    <Provider store={store}>
      <Router history={browserHistory}>
        <Switch>
          <Route exact path="/" component={
            (props) => (
              <Home
                history={props.history}
                loggedIn={loggedIn}
                handleLogout={handleLogout}/>)} />
          <Route path="/login" component={
            (props) => (
              <Login
                history={props.history}
                handleLogin={handleLogin}/>)} />
         <Route path="/workflow" component={
            loggedIn ?
            ((props) => (
              <Workflows
                history={props.history}
                match={props.match}/>)) :
            ((props) => (
              <Redirect to={
                {
                  pathname: '/',
                  state: {from: props.location},
               }
              }/>)) }/>
        </Switch>
      </Router>
    </Provider>
);

}

// Home.js
shouldComponentUpdate(nextProps, nextState) {
  console.log(nextProps);
  console.log(nextState);
  if(nextProps.loggedIn !== nextState.loggedIn) {
    if(nextState.loggedIn) {
      this.socket.connect();
    } else {
      this.socket.disconnect();
    }
  }

  return true;
}

Answer 1

看起来您的组件在每次状态更改后都会重新安装。这可以解释为什么重绘组件，但未调用生命周期函数 shouldComponentUpdate()。如果您在 componentWillMount() 中粘贴日志语句，您应该会看到它被多次调用。

组件是否应该在 redux/react-router v4 中更新

Should component update in redux/react-router v4

reactjs

react-redux

react-router-v4