Javascript 为什么ComponentShouldUpdate阻止呈现注释？
我在下面的代码中实现了componentShouldUpdate，以尝试提高性能。这一目标已经实现，但现在评论无法呈现。不过，浏览器控制台显示正在接收所有内容。还有一个div，它提供了注释的数量，并且正在更新Javascript 为什么ComponentShouldUpdate阻止呈现注释？,javascript,reactjs,lifecycle,Javascript,Reactjs,Lifecycle,我在下面的代码中实现了componentShouldUpdate，以尝试提高性能。这一目标已经实现，但现在评论无法呈现。不过，浏览器控制台显示正在接收所有内容。还有一个div，它提供了注释的数量，并且正在更新 class ProposalDetail extends React.Component { constructor(props) { super(props);
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;
JSON.stringify(this.props.comments) === JSON.stringify(nextProps.comments)
JSON.stringify(this.props.comments) === JSON.stringify(nextProps.comments)
问题是，您无法以这种方式比较两个数组。不是componentShouldUpdate，而是shouldComponentUpdate shouldComponentUpdate基本上决定组件是否需要重新呈现。此方法仅返回true或false。默认情况下，此方法返回true，这意味着无论何时发生setState或接收到道具，组件都需要重新渲染，而不管状态和道具比较如何 因此，在您的情况下，您在shouldComponentUpdate中错误地比较了注释。只有当当前道具和以前的道具不相等时，才需要返回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
}
}
不是componentShouldUpdate而是shouldComponentUpdate shouldComponentUpdate基本上决定组件是否需要重新呈现。此方法仅返回true或false。默认情况下，此方法返回true，这意味着无论何时发生setState或接收到道具，组件都需要重新渲染，而不管状态和道具比较如何 因此，在您的情况下，您在shouldComponentUpdate中错误地比较了注释。只有当当前道具和以前的道具不相等时，才需要返回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
}
}
您正在检查两个不同对象之间是否相等。虽然nextrops.comments和this.props.comments的内容可能相同，但它们指向不同的对象。找到一种方法来检查它们的内容。把你的代码放到一个沙箱里可能会有帮助，比如Hmmm好吧，我从来没想过要访问它们的内容。我只是尝试添加.length，因为注释是一个数组，但仍然无效。为什么添加componentShouldUpdate会使注释无法呈现？您是否可以添加注释的结构？您正在检查两个不同对象之间是否相等。虽然nextrops.comments和this.props.comments的内容可能相同，但它们指向不同的对象。找到一种方法来检查它们的内容。把你的代码放到一个沙箱里可能会有帮助，比如Hmmm好吧，我从来没想过要访问它们的内容。我只是尝试添加.length，因为注释是一个数组，但仍然无效。为什么添加componentShouldUpdate会使评论无法呈现？你能添加评论的结构吗？嗯，为什么？项目的顺序必须完全相同，才能工作。试试JSON.stringify[1,2]==JSON.stringify[2,1]//False这就是为什么我写了：绝对帮不上忙。我称之为肮脏的黑客行为。嗯，为什么？物品的顺序必须完全相同，这样才能起作用。试试JSON.stringify[1,2]==JSON.stringify[2,1]//False这就是为什么我写了：绝对帮不上忙。我称之为肮脏的黑客行为。由于注释是数组/对象，所以该代码不起作用。由于注释是数组/对象，所以该代码不起作用。