reactjs - 使用react-hooks仅重新渲染一个 child

Question

const {useRef, useState} = React;

function List(){
  const renderCount = useRef(0);
  console.log('<List /> is rendered', ++renderCount.current);
  const [isClicked, setIsClicked] = useState(false);
  const toggle = () => setIsClicked(!isClicked)
  return (
    <div>
      <ButtonA onClick={toggle} isClicked={isClicked} />
      <ButtonB />
    </div>
  )
}

function ButtonA(props){
  const renderCount = useRef(0);
  console.log('<ButtonA /> is rendered', ++renderCount.current);

  return (<button onClick={props.onClick} className={`${props.isClicked ? 'true':'false'}`} >Button A</button>);
}

function ButtonB(){
  const renderCount = useRef(0);
  console.log('<ButtonB /> is rendered', ++renderCount.current);
  
  return (<button>Button B </button>);
}


ReactDOM.render(
  <List />, document.getElementById('root')
)

button.true{
  background-color: red;
}

button.false{
  background-color: blue;
  
  }

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

这是一个示例代码。

当我点击<ButtonA />时，我期望重新渲染 <List />和<Button A/> ，但是<ButtonB />也被重新渲染。

我想阻止重新渲染 <ButtonB />当我点击<ButtonA />时

我怎样才能实现它？

Answer 1

您可以利用 React.memo 获得与功能组件的 shouldComponentUpdate 相同的功能

const {useRef, useState} = React;

function List(){
  const renderCount = useRef(0);
  console.log('<List /> is rendered', ++renderCount.current);
  const [isClicked, setIsClicked] = useState(false);
  const toggle = () => setIsClicked(!isClicked)
  return (
    <div>
      <ButtonA onClick={toggle} isClicked={isClicked} />
      <ButtonB />
    </div>
  )
}

function ButtonA(props){
  const renderCount = useRef(0);
  console.log('<ButtonA /> is rendered', ++renderCount.current);

  return (<button onClick={props.onClick} className={`${props.isClicked ? 'true':'false'}`} >Button A</button>);
}

const ButtonB = React.memo(() => {
  const renderCount = useRef(0);
  console.log('<ButtonB /> is rendered', ++renderCount.current);
  
  return (<button>Button B </button>);
})


ReactDOM.render(
  <List />, document.getElementById('root')
)

button.true{
  background-color: red;
}

button.false{
  background-color: blue;
  
  }

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>