javascript - 即使没有变化，也要重新渲染

我们已经使用redux建立了一个项目。在此项目中，我们从api获取信息对象并将其插入商店。现在我们注意到，即使api返回与上一个请求相同的状态，功能组件也会重新呈现。

我们认为这是因为我们要覆盖商店，但我们不确定。

ChatContainer.js

const mapStateToProps = function (state) {
  return {
    content: state.info.content,
    loading: state.info.loading,
  }
}

const ChatContainer = connect(
  mapStateToProps,
)(Chat)
export default ChatContainer

Chat.js

function Chat(props) {

    const { content, loading } = props;
    return (
        <Info content={content} loading={loading} />
    )
}

action.js

export function setInfo(info) {
  return {
    type: SET_INFO, info: {
      content: info,
      loading: false
    }
  }
}

reducer.js

function setInfo(state = { content: [], loading: true }, action) {
  switch (action.type) {
    case SET_INFO:
      return action.info
    default:
      return state
  }
}

const appReducer = combineReducers({
...
  info: setInfo,
...
})
export default appReducer

最佳答案

如果state.info.content是一个对象，则每次使用setInfo对其进行更改时，都会有一个新引用。 React-redux对mapStateToProps的结果进行了浅浅的比较，因此，如果每次重新渲染组件时，您的内容都是不同的引用。 connect HOC具有一个options参数，可用于实现自定义比较。

我的建议是将检查添加到您的setInfo或调用setInfo的代码中，如果数据已经加载/未更改（不知道您的业务逻辑），则不调用您的API。

关于javascript - 即使没有变化，也要重新渲染，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60040908/