官网上推荐的是使用useMemo
但是实在是有点没看懂。。。。

import React, { useState,Fragment } from 'react'
import PropTypes from 'prop-types';
function ToDoItem (props){
  console.log('ToDoItem render');
  const [count] = useState(0);

  function deleteItem () {
    props.deleteItem(props.index)
  }

  return (
    <Fragment>
      <li dangerouslySetInnerHTML={{ __html: props.content }}></li>
      <button onClick={deleteItem}>删除</button>
      <div>{count}</div>
    </Fragment>
  )
}

对于这个组件
如果我想实现在props.content变化的时候才render应该怎么做呢？
还是说这个useMemo其实是写在父组件中的？但是父组件是一个class啊
官方给出的例子是

function Parent({ a, b }) {
  // Only re-rendered if `a` changes:
  const child1 = useMemo(() => <Child1 a={a} />, [a]);
  // Only re-rendered if `b` changes:
  const child2 = useMemo(() => <Child2 b={b} />, [b]);
  return (
    <>
      {child1}
      {child2}
    </>
  )
}

对此感觉很困惑