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

【问题标题】：How to make React page render only change component instead of the whole page?如何使 React 页面仅渲染更改组件而不是整个页面？
【发布时间】：2020-12-09 00:02:27
【问题描述】：

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

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

【问题讨论】：

页面保持check状态，为什么不重新渲染？如果你只想重新渲染Toggle，它必须没有状态依赖。
你希望 not 重新渲染什么，因为 ToggleBox 接受不断变化的道具，如果你使用 memo，唯一不会重新渲染的东西是成为按钮，这对我来说没什么好担心的。你也可以over memoize 不要忘记...
@DennisVash 你能写出更好的架构建议吗？因为我不明白你的意思
@andymccullough 我希望整个页面不会重新渲染，而只是按钮和切换本身。我在任何地方都使用了备忘录，在 Toggle、ToggleBox 和 Index 中。不工作
再次，做一个codedanbox，How to create a Minimal, Reproducible Example，祝你好运

标签： javascript reactjs next.js

【解决方案1】：

将你的状态进一步向下移动，你希望它尽可能靠近它影响的组件，这可能需要分解成更小的组件，例如，将以下分解成单独的组件 -

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 />
...

【讨论】：

如果您尝试的是页面上的新编辑，您的状态仍然位于最高组件，您需要将您的状态移动到较低组件树，我上面的示例组件不包含你现在拥有的Layout，我上面的示例组件是一个小组件，用于现在的布局，状态是仅包含在上面的小组件（NewToggleComponent）中。组件树中的状态越高，under 它将渲染的组件就越多
谢谢，有道理。那么我会把它移到哪里呢？对不起我烦人的问题。我只是真的想让这个错误消失:(