Question

我注意到当redux状态的数组更新时，connected组件将被重新挂载。在dispatching之后的日志中，我直接看到~App和App。我的印象是react / redux应该更新组件。我已经阅读了所有文档，并基于我的理解，反应协调算法不应具有这种行为。

演示该问题的示例代码：

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import {connect} from 'react-redux';


class AppComponent extends React.Component {
  constructor(opts) {
    super(opts);
  }
  componentDidMount() {
    console.log('App');
  }
  componentWillUnmount() {
    console.log('~App');
  }
  shouldComponentUpdate(nextProps) {
    console.log('shouldComponentUpdate');
  }
  render() {
    console.log('render');
    return (
      <span>hello</span>
    );
  }
};

const App = connect(
  (state, props) => {
    console.log('mapping state:', JSON.stringify(state));
    return {
      state
    };
  }
)(AppComponent);


const reducer = (state = [{id: 0, value: 'test0'}, {id: 1, value: 'test1'}], action) => {
  return state.map(o => {
    if (o.id === action.id) {
      return {
        ...o,
        value: action.value
      };
    }
    return o;
  });
};


const store = createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app')
);


setTimeout(() => {
  console.log('dispatching');
  store.dispatch({
    type: 'UPDATE',
    id: 1,
    value: 'test1 updated'
  });
}, 1000);

如何避免重新安装AppComponent？如果redux状态不是数组，我没有这个问题。另外，在其他react / redux项目中，我没有这个问题。相同的npm软件包版本。我以为我在这里某个地方犯了一个愚蠢的错误，但是我做错了什么却茫然无措。任何帮助将不胜感激。

Answer 1

我将您的代码放入CodeSandbox中，对我来说似乎运行良好：

mapping state: 
[{"id":0,"value":"test0"},{"id":1,"value":"test1"}] 
render 
App cDM 
dispatching 
mapping state: 
[{"id":0,"value":"test0"},{"id":1,"value":"test1 updated"}] 
shouldComponentUpdate 
render

所以，我认为您的代码实际上还可以。沙盒位于此处：https://codesandbox.io/s/k0k8rl8wzr

如何避免在Redux更新时重新安装组件？

1 个答案: