时间戳

首页 > 解决方案 > 如何使 React 页面仅渲染更改组件而不是整个页面？

javascript - 如何使 React 页面仅渲染更改组件而不是整个页面？

问题描述

所以我有一个看起来像这样的切换（见下文），但页面总是在我第一次单击切换时重新呈现整个内容。

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方法，但它似乎不起作用。有什么建议可以让页面不重新渲染整个内容而只是切换？

标签： javascriptreactjsnext.js

解决方案

将您的状态移到树的下方，您希望它尽可能靠近它影响的组件，这可能需要分解成更小的组件，例如，将以下内容分解成一个单独的组件 -

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>
   )
}

从顶级组件中删除状态，并在您的顶级组件中使用此组件 -

...
<NewToggleComponent />
...

推荐阅读