javascript - 为什么 ComponentShouldUpdate 阻止注释渲染？

Question

我在下面的代码中实现了 componentShouldUpdate 来尝试提高性能。这个目标已经实现了，但是现在评论不呈现了。不过，浏览器控制台显示所有内容都已被接收。还有一个 div 可以呈现评论数量，并且也在更新。

            class ProposalDetail extends React.Component {
                      constructor(props) {
                        super(props);
                        this.state = {
                          sortedComments: []
                        };
                      }
                      componentDidUpdate(prevProps) {
                        if((!prevProps.proposal || Object.keys(prevProps.proposal).length === 0 ) &&
                          this.props.proposal && Object.keys(this.props.proposal).length > 0 &&
                          this.props.proposal.status === 4 ){
                          prevProps.onFetchProposalVoteStatus(prevProps.token);
                        }
                        this.handleUpdateOfComments(prevProps, this.props);
                      }
                      shouldComponentUpdate(nextProps, nextState) {
                        console.log('thisProps', this.props.comments)
                        console.log('nextProps', nextProps.comments)
                        if (this.props.comments === nextProps.comments) {
                            return true
                        }
                        else {
                            return false
                        }
                      }
                      componentDidMount() {
                        this.props.onFetchLikedComments(this.props.token);
                      }
                      componentWillUnmount() {
                        this.props.resetLastSubmittedProposal();
                      }
                      handleUpdateOfComments = (currentProps, nextProps) => {
                        let sortedComments;

                        if(!nextProps.comments || nextProps.comments.length === 0) {
                          return;
                        }
                        // sort option changed
                        if(currentProps.commentsSortOption !== nextProps.commentsSortOption) {
                          sortedComments = updateSortedComments(
                            this.state.sortedComments,
                            nextProps.commentsSortOption
                          );
                        }

                        // new comment added
                        if(currentProps.comments.length !== nextProps.comments.length) {
                          const isEmpty = currentProps.comments.length === 0;
                          const newComments = isEmpty ?
                            nextProps.comments :
                            [nextProps.comments[nextProps.comments.length - 1]]
                              .concat(this.state.sortedComments);
                          sortedComments = updateSortedComments(
                            newComments,
                            currentProps.commentsSortOption,
                            nextProps.commentsvotes,
                            isEmpty
                          );
                        }

                        // usernames aren't fully merged into comments
                        const commentWithoutAnUsername = comments => comments.filter(c => !c.username)[0];
                        if (commentWithoutAnUsername(this.state.sortedComments) && !commentWithoutAnUsername(nextProps.comments)) {
                          sortedComments = updateSortedComments(
                            nextProps.comments,
                            currentProps.commentsSortOption,
                            nextProps.commentsvotes,
                            false
                          );
                        }

                        // commentsvotes changed
                        if(nextProps.commentsvotes && !isEqual(currentProps.commentsvotes, nextProps.commentsvotes)) {
                          const updatedComments = getUpdatedComments(nextProps.commentsvotes, nextProps.comments);
                          const newComments = mergeNewComments(this.state.sortedComments, updatedComments);
                          sortedComments = updateSortedComments(
                            newComments,
                            currentProps.commentsSortOption,
                            nextProps.commentsvotes,
                            false
                          );
                        }

                        // comment gets censored
                        if(nextProps.censoredComment && !isEqual(currentProps.censoredComment, nextProps.censoredComment)) {
                          sortedComments = updateSortedComments(
                            nextProps.comments,
                            currentProps.commentsSortOption,
                            nextProps.commentsvotes,
                            true
                          );
                        }

                        if(sortedComments) {
                          this.setState({ sortedComments });
                          console.log('setState', this.state.sortedComments);

                        }
                      }
                      render() {
                        const {
                          isLoading,
                          proposal,
                          token,
                          error,
                          markdownFile,
                          otherFiles,
                          onFetchData,
                          ...props
                        } = this.props;
                        console.log(this.props);
                        const comments = this.state.sortedComments;
                        return (
                          <div className="content" role="main">
                            <div className="page proposal-page">
                              {error ? (
                                <Message
                                  type="error"
                                  header="Proposal not found"
                                  body={error} />
                              ) : (
                                <Content  {...{
                                  isLoading,
                                  error,
                                  bodyClassName: "single-page comments-page",
                                  onFetchData: () => onFetchData(token),
                                  listings: isLoading ? [] : [
                                    {
                                      allChildren: [{
                                        kind: "t3",
                                        data: {
                                          ...proposalToT3(proposal, 0).data,
                                          otherFiles,
                                          selftext: markdownFile ? getTextFromIndexMd(markdownFile) : null,
                                          selftext_html: markdownFile ? getTextFromIndexMd(markdownFile) : null
                                        }
                                      }]
                                    },
                                    { allChildren: commentsToT1(comments) }
                                  ],
                                  ...props
                                }} />
                              )}
                            </div>
                          </div>
                        );
                      }
                    }

                    export default ProposalDetail;

Answer 1

不是componentShouldUpdate，而是shouldComponentUpdate

shouldComponentUpdate 基本上决定组件是否需要重新渲染。此方法仅返回 true 或 false。默认情况下，此方法返回 true，这意味着每当 setState 发生或收到 props 时，无论状态和 props 比较如何，组件都需要重新渲染。

因此，在您的情况下，您在 shouldComponentUpdate 中错误地比较了注释。仅当当前 Prop 和先前 Prop 不相等时，您才需要返回 true，否则返回 false，但您正在检查反之亦然。

下面的代码可以工作

     shouldComponentUpdate(nextProps, nextState) {
                    console.log('thisProps', this.props.comments)
                    console.log('nextProps', nextProps.comments)
                    if (JSON.stringify(this.props.comments) !== JSON.stringify(nextProps.comments)) {
                        return true
                    }
                    else {
                        return false
                    }
                  }