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

Question

需要一些帮助〜

我有两个组件，并用React.memo包装了Parent:

child

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

用<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'));