React组件使用children后出现冗余重渲染问题求助

原本代码运行正常：为某篇Post添加评论时，仅该Post会重渲染。但修改代码通过children属性传递Post的文本内容后，添加任意一篇Post的评论时，所有Post都会重新渲染（预期仅目标Post重渲染）。已使用React.memo包裹组件，但仍出现此问题，React版本为18.3.1。

原代码 #

const CommentForm = React.memo(({ addComment }: ICommentFormProps) => {
    const [inputValue, setInputValue] = useState("");

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setInputValue(e.target.value);
    }

    const handleAddComment = () => {
        addComment(inputValue);
        setInputValue("");
    };

    console.log("RENDER COMMENT FORM");

    return (
        <div>
            <input type="text" value={inputValue} onChange={handleChange}/>
            <button onClick={handleAddComment}>Add Comment</button>
        </div>
    );
});

const Post = React.memo(({ addComment, comments, text, id }: IPostProps) => {
    console.log("RENDER POST");

    const commentsElements = useMemo(() => comments.map(comment => (
        <Comment key={comment.id}>
            <span>{comment.text}</span>
        </Comment>
    )), [comments]);

    return (
        <div className={styles.post}>
            <span>{text}</span>
            <CommentForm addComment={(text) => addComment(text, id)} />
            {commentsElements}
        </div>
    );
});

const Comment = React.memo(({ children }: ICommentProps) => {
    console.log("RENDER COMMENT");
    return (
        <div className={styles.comment}>
            {children}
        </div>
    );
});

const PostForm = ({ addPost }: IPostFormProps) => {
    const [inputValue, setInputValue] = useState("");

    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
        setInputValue(e.target.value);
    }

    const handleAddPost = () => {
        addPost(inputValue);
    };

    console.log("RENDER POST FORM");

    return (
        <div className={styles.form}>
            <div><textarea value={inputValue} onChange={handleChange}/></div>
            <div>
                <button onClick={handleAddPost}>Add Post</button>
            </div>
        </div>
    );
};

type Action = { type: "ADD_POST", text: string } | { type: "ADD_COMMENT", text: string, post_id: string };

const postsReducer = (state: IPost[], action: Action): IPost[] => {
    switch (action.type) {
        case "ADD_POST": {
            return [...state, { id: v4(), text: action.text, comments: [] }]
        }

        case "ADD_COMMENT": {
            return state.map(
                post => post.id === action.post_id ?
                { ...post, comments: [
                    ...post.comments, { id: v4(), text: action.text, post_id: action.post_id }
                    ]
                } : post
        );
        }

        default: {
            return state;
        }
    }
};

const Feed = () => {
    const [posts, dispatch] = useReducer(postsReducer, []);

    const addPost = useCallback((text: string) => {
        dispatch({ type: "ADD_POST", text });
    }, []);

    const addComment = useCallback((text: string, post_id: string) => {
        dispatch({ type: "ADD_COMMENT", text, post_id });
    }, []);

    const postsElements = useMemo(() => posts.map(post => (
        <Post key={post.id} id={post.id} comments={post.comments} addComment={addComment} text={post.text} />
    )), [addComment, posts]);

    return (
        <div className={styles.feed}>
            <PostForm addPost={addPost} />
            <div className={styles.postContainer}>
                {postsElements}
            </div>
        </div>
    );
};

修改后的代码 #

// Feed组件内的修改
const postsElements = useMemo(() => posts.map(post => (
    <Post key={post.id} id={post.id} comments={post.comments} addComment={addComment}>
        <span>{post.text}</span>
    </Post>
)), [addComment, posts]);


// Post组件的修改
const Post = React.memo(({ addComment, comments, children, id }: IPostProps) => {
    console.log("RENDER POST");

    const commentsElements = useMemo(() => comments.map(comment => (
        <Comment key={comment.id}>
            <span>{comment.text}</span>
        </Comment>
    )), [comments]);

    return (
        <div className={styles.post}>
            {children}
            <CommentForm addComment={(text) => addComment(text, id)} />
            {commentsElements}
        </div>
    );
});

问题原因及解决方法 #

核心原因 #

React.memo默认使用浅比较判断组件是否需要重渲染。当通过children传递<span>{post.text}</span>时，每次Feed组件因状态更新（添加评论）重新渲染时，所有Post的children都会被创建为新的React元素对象——即使post.text没有变化，这个<span>元素也是全新的引用。

React.memo的浅比较会检测到children属性的引用变化，因此判定所有Post组件都需要重渲染，最终导致冗余渲染。

而原代码中直接传递text字符串，字符串是原始值，浅比较时只要值相同就会判定为未变化，所以只有目标Post会重渲染。

解决方法 #

有两种常见解决方案：

1. 自定义React.memo的比较函数：在Post组件的React.memo中传入第二个参数，手动比较children的实际内容而非引用。注意复杂比较逻辑可能影响性能，需确保比较准确性：

const Post = React.memo(({ addComment, comments, children, id }: IPostProps) => {
    // ...组件内容
}, (prevProps, nextProps) => {
    // 比较除children外的其他属性
    const propsEqual = prevProps.id === nextProps.id && 
                       prevProps.comments === nextProps.comments &&
                       prevProps.addComment === nextProps.addComment;
    // 比较children的文本内容
    const childrenEqual = prevProps.children.props.children === nextProps.children.props.children;
    return propsEqual && childrenEqual;
});

2. 避免传递动态创建的children：将原本通过children传递的内容改回props传递（如原代码的text属性），或者把children的内容封装成稳定的组件/值。比如把<span>{post.text}</span>抽成独立的、用React.memo包裹的组件，确保引用稳定：

const PostText = React.memo(({ text }: { text: string }) => {
    return <span>{text}</span>;
});

// 在Feed中使用
const postsElements = useMemo(() => posts.map(post => (
    <Post key={post.id} id={post.id} comments={post.comments} addComment={addComment}>
        <PostText text={post.text} />
    </Post>
)), [addComment, posts]);

这样PostText的引用稳定，只要text不变，React.memo会阻止它重渲染，同时传递给Post的children引用也不会改变，Post组件就能正常通过React.memo的浅比较避免冗余渲染。

内容的提问来源于stack exchange，提问作者Sergio Ivanuzzo