Question

我正在尝试在我的React应用程序中诊断某些间歇性的糟糕性能，并且可以看到许多组件都在更新，而props或state中没有任何变化。

我有一个套接字连接，无论何时其他用户键入内容，它都会广播他们正在键入的事实-然后将其存储在typingUserData下的我的reducer中。

现在，几乎每个组件都会在更新时重新渲染，即使它们从不引用此变量，也没有包含在mapStateToProps中，也没有任何子组件。

我可以使用shouldComponentUpdate来阻止一个组件中的更新，但是无论如何它的每个子组件都会重新渲染。是否打算在每个组件上使用几乎相同的shouldComponentUpdate？

我的理解是，如果我可以防止它在树中更高，则不需要渲染较低的组件，但是无论如何，它们都会这样做。我想我在问：

a）是否有办法找出他们为什么选择重新渲染，以及

b）是否可以在shouldComponentUpdate中说“不渲染，您的任何一个孩子都不应该渲染”？

编辑：要添加更多上下文，我将从套接字连接中接收键入数据，如下所示：

window.Echo.join('account_'+accountId).listenForWhisper('typing', e => {
    dispatch({
        type: TYPING_SET,
        payload: e,
    })
}

这已合并为我的状态，

export default function (state = INITIAL_STATE, action) {
    switch (action.type) {
        case TYPING_SET:
            let typingUserData = cloneDeep(state.typingUserData)

            typingUserData[action.payload.userId] = {
                isTyping: action.payload.isTyping,
                chatId: action.payload.chatId
            }

            return {
                ...state,
                typingUserData
            }
    }
}

某些组件像这样从mapStateToProps侦听此问题：

function mapStateToProps(state) {
  return {
    typingUserData: state.account.typingUserData,
  }
}

...但是99％的组件没有。对于重新渲染的整个树，树中根本没有任何引用打字用户数据。

我正在使用react-redux 5.0.7。
据我所知，没有两次安装。
在Chrome的React控制台工具中选择“突出显示更新”后，几乎所有的内容都会显示出来。删除“键入”操作将使其全部消失。

希望有足够的信息！对不起，我不知道该怎么办。

组件数量正在更新，而状态没有任何相关变化

0 个答案: