如何将 React.memo 与包含子项的组件一起使用

Question

需要帮助~

我有两个组件，我用 React.memo 包裹了 Parent：

孩子

const Child = ()=> <div>I'm Child</div

export default Child

家长

const Parent = (props)=> <div>{props.children}</div>

export default React.memo(Parent)

在应用程序中使用：

const App = () => {
  const [count, setCount] = useState(0)

  return(
    <div>
      <button onClick={()=>setCount(count+1)}></button>

      <Parent>
        <Child></Child>
      </Parent>
    </div>
  )
}

点击按钮，结果：

父组件将重新渲染，因此备忘录不起作用，因为它的子组件是一个函数组件

那么，如何防止重新渲染？

我知道用useMemo解决的方法，但是又丑又不友好，大家有更好的想法吗？

const App = () => {
  const [count, setCount] = useState(0)

  const children = useMemo(()=><Child></Child>,[])

  return(
    <div>
      <button onClick={()=>setCount(count+1)}></button>

      <Parent>
        {children}
      </Parent>
    </div>
  )
}

Answer 1

const children = useMemo(()=><Child></Child>,[])

是最简单的方法。使用memo(Child)不会起作用，因为 jsx 实际上会在您调用时返回一个新对象<Child />。React.memo默认情况下，仅使用简单的浅层比较，因此确实没有其他直接的方法来解决它。您可以创建自己的函数，最终支持子级并将其传递给React.memo(MyComp, myChildrenAwareEqual).

Answer 2

包裹你<Child />的React.memo：

const Child = ()=> {
  console.log('render') // fires only once - on initial render
  return <div>I'm Child</div>
}

const MChild = React.memo(Child);
const Parent = (props)=> <div>{props.children}</div>
const MParent = React.memo(Parent)

const App = () => {
  const [count, setCount] = useState(0);

  return(
    <div>
      <button onClick={()=>setCount(count+1)}>increment {count}</button>
      <MParent>
        <MChild></MChild>
      </MParent>
    </div>
  )
}

render(<App />, document.getElementById('root'));

Answer 3

移动<Parent><Child/></Parent>到一个单独的组件中，并记住该组件：

const Family = memo(() => <Parent><Child/></Parent>);

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      <button onClick={() => setCount(count => count + 1)}>{count}</button>
      <Family />
    </>
  )
}

演示