如何使 React 頁面僅渲染更改組件而不是整個頁面？

Question

所以我有一個看起來像這樣的切換（見下文），但頁面總是在我第一次單擊切換時重新呈現整個內容。

export default function Toggle({isChecked, label}: Props) {
  return (
    <Wrapper>
      <Switch isChecked={isChecked}>
        <span />
      </Switch>
      {label}
    </Wrapper>
  )
}

然后是另一個使用此 Toggle 組件的組件

export default function ToggleBox({isChecked, label, children}: Props) {
  return (
    <Wrapper>
      <Toggle isChecked={isChecked} label={label} />
      <Content>{children}</Content>
    </Wrapper>
  )
}

有一個布局

export default function Layout({...someprops bla bla, children}: Props) {
  <Wrapper>
       <DesktopImg>
        <ImageWrapper>
          <Image src={image.url} alt={`${headline} image`} layout="fill" />
       </ImageWrapper>
    </DesktopImg>
    <div>
      <Content>
        {back && backButton}
         <MobileImg>
           <Image
            src={image.url}
            alt={`${headline} image`}
            width={image.width}
            height={image.height}
           />
          </MobileImg>
          {headline}
          <P gutterSize="medium">{description}</P>
          </Content>
          <ChildrenContainer>{children}</ChildrenContainer>
         </div>
        </Wrapper>
}

最后是使用 ToggleBox 的頁面。

export default function Index({isChecked, label, children}: Props) {
  const [check, setCheck] = useState(false)
    return (
     <Layout>
        <div onClick={() => setCheck(!check)}>
          <ToggleBox label="some label..." isChecked={check}>
            //sometext..
          </ToggleBox>
        </div>
        <Button onClick={nextPage} disabled={!check}>
          Next
        </Button>
     </Layout>
    )
 }

我有點嘗試使用React.memo方法，但它似乎不起作用。 有什么建議可以讓頁面不重新渲染整個內容而只是切換？

Answer 1

將您的 state 移到樹的下方，您希望它盡可能靠近它影響的組件，這可能需要分解成更小的組件，例如，將以下內容分解成一個單獨的組件 -

const NewToggleComponent = () => {
   const [check, setCheck] = useState(false)
   return (
       <div onClick={() => setCheck(!check)}>
          <ToggleBox label="some label..." isChecked={check}>
            //sometext..
          </ToggleBox>
        </div>
        <Button onClick={nextPage} disabled={!check}>
          Next
        </Button>
   )
}

從頂級組件中刪除 state ，並在您的頂級組件中使用此組件 -

...
<NewToggleComponent />
...