Reactjs 如何控制组件何时呈现 React js 为帖子添加 comments

当一个组件被包裹在容器中时，会发生react .memo()，React渲染组件并记忆结果.在下一次渲染之前，如果新的props 相同，React将重新使用记忆结果，跳过下一次渲染.

在下面的代码中，将allComments函数传递给comment组件.

  const allComments = (comments, bg) => {
    const output = comments.map((comment) => {
      return (
        <Comment
          key={comment.id}
          comment={comment}
          allComments={allComments} // the function get's passed as new function object on each rerender
          bg={bg}
        />
      );
    });

    return output;
  };

那么问题是什么？为什么会出现这种行为？

由于函数相等性判断，javascript中的函数被视为一等公民，换句话说，函数是对象.

function factory() {
  return (a, b) => a + b;
}
const sum1 = factory();
const sum2 = factory();
sum1(1, 2); // => 3
sum2(1, 2); // => 3
sum1 === sum2; // => false
sum1 === sum1; // => true

函数sum1和sum2共享相同的代码源，但它们是不同的函数对象.比较它们sum1==sum2的计算结果为false.这就是Javascript的工作原理.

在代码中，通过react在每个渲染中创建一个新的函数对象allComments，它最终作为新的props 传递给React.memo().默认情况下，React.memo()会对props 和props 对象进行粗略比较.这就是为什么它会触发新的重播.

现在我们深刻理解了问题所在，以及导致这种行为的原因.

解决方法是用useCallback来包装你的allComments

useCallback的目的是什么？它在渲染之间维护一个函数实例.因此，React.memo()个将起作用.

 const allComments = useCallback((comments, bg) => {
    const output = comments.map((comment) => {
      return (
        <Comment
          key={comment.id}
          comment={comment}
          allComments={allComments}
          bg={bg}
        />
      );
    });

    return output;
  },[]);