如何根据 mapstatetoprops 返回的对象渲染组件？ [复制]答案

【问题标题】：How to render component according the object returned by mapstatetoprops? [duplicate]如何根据 mapstatetoprops 返回的对象渲染组件？ [复制]
【发布时间】：2018-01-05 05:45:52
【问题描述】：

我是 React 的新手。

场景：

Redux State 有：X、Y、Z 对象：

    class A {
          render(){...}
        }

    mapstatetoprops(){
        return { X: x1}
    }

connect(mapstatetoprops)(A)

我在某处读到，当 X、Y 或 Z 中的 redux 状态发生变化时，connect 调用 mapstatetoprops 来重新渲染组件 A。

但是，我只想在更改 X 时重新渲染 A。这可能吗？

【问题讨论】：

标签： reactjs react-redux

【解决方案1】：

我在某处读到，当 X、Y 或 Z 中的 redux 状态发生变化时，连接调用 mapstatetoprops 来重新渲染组件 A。

此陈述部分正确。 Redux 状态的更改将触发对mapStateToProps() 的调用（假设它不是deep-nested state change）。但是，render() 仅在 props 或通过 setState() (Link) 修改状态时调用。

因此，如果您的 Redux 状态发生变化，render() 将仅根据您在 mapStateToProps() 中执行的操作而被调用。

【讨论】：

【解决方案2】：

我认为这是解释您的问题的最佳来源

查看官方文档了解更多信息https://redux.js.org/docs/faq/ReactRedux.html

为什么我的组件没有重新渲染，或者我的 mapStateToProps 没有运行？到目前为止，意外地直接改变或修改您的状态是组件在调度操作后不重新渲染的最常见原因。 Redux 期望您的 reducer 将“不可变地”更新它们的状态，这实际上意味着始终制作数据副本，并将您的更改应用于副本。如果你从 reducer 返回相同的对象，Redux 会假设没有任何改变，即使你改变了它的内容。类似地，React Redux 试图通过对 shouldComponentUpdate 中传入的 props 进行浅层相等引用检查来提高性能，如果所有引用都相同，则 shouldComponentUpdate 返回 false 以跳过实际更新原始组件。

请务必记住，每当您更新嵌套值时，您还必须在状态树中返回高于它的任何内容的新副本。如果你有 state.a.b.c.d，并且你想对 d 进行更新，你还需要返回 c、b、a 和 state 的新副本。这个状态树突变图展示了树深处的变化如何需要一直向上变化。

请注意，“不可变地更新数据”并不意味着您必须使用 Immutable.js，尽管这当然是一种选择。您可以使用几种不同的方法对普通 JS 对象和数组进行不可变更新：

使用 Object.assign() 或 _.extend() 等函数以及 slice() 和 concat() 等数组函数复制对象 ES6 中的数组扩展运算符，以及为未来版本的 JavaScript 提出的类似对象扩展运算符将不可变更新逻辑封装到更简单函数中的实用程序库

【讨论】：