Reactjs 当使用功能组件更改状态时，如何防止在react中重新渲染

我使用功能组件和React Redux来管理状态。简单地说，我希望即使状态改变，渲染也不会发生。首先，代码如下。这是一个简单的解释代码

const NOUPDATE = ({ uploadAnswer, noState }) => (
  <>
    <div className="content">
      <div className="container">
        <p className="directions" />
        <ul className="qbox">{noState ? (<p>true</p>) : (<p>false</p>)}</ul>
        <button onClick={uploadAnswer}>upload</button>
      </div>
    </div>
  </>
);
const mapStateToProps = state => ({
  noState: state.problemInfoReducer.checkMode,
});
const mapDispatchToProps = dispatch => ({
  uploadAnswer: value => dispatch(uploadAnswer(value)),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(NOUPDATE);

constnoupdate=（{uploadAnswer，noState}）=>(

{noState？（true
）：（false
）}
上传
);
常量mapStateToProps=状态=>({
noState:state.problemInformeducer.checkMode，
});
const mapDispatchToProps=调度=>({
uploadAnswer:value=>dispatch（uploadAnswer（value）），
});
导出默认连接(
MapStateTops，
mapDispatchToProps，
)（最新版本）；

---

uploadAnswer在每次发送时都会反转noState。因此，如果我每次发送uploadAnswer，noState就会更新，屏幕会作为一个整体重新呈现。即使noState已更新，我也不希望重新呈现屏幕。

您可以使用

React.memo

来记忆组件。传递给

React.memo

的第二个参数是一个接受

oldProps

和

newProps

的函数。应更新组件时返回

false

下面，我只在

上传答案

在

旧道具

和

新道具

之间不匹配时返回

false

，因此这是组件重新渲染的唯一时间

const NOUPDATE = React.memo(
  ({ uploadAnswer, noState }) => (
    <>
      <div className="content">
        <div className="container">
          <p className="directions" />
          <ul className="qbox">{noState ? <p>true</p> : <p>false</p>}</ul>
          <button onClick={uploadAnswer}>upload</button>
        </div>
      </div>
    </>
  ),
  (oldProps, newProps) => {
    if (oldProps.uploadAnswer !== newProps.uploadAnswer) {
      return false;
    }

    return true;
  }
);

const NOUPDATE=React.memo(
（{uploadAnswer，noState}）=>(

{noState？true
：false
}
上传
),
（旧道具、新道具）=>{
if（oldProps.uploadAnswer！==newProps.uploadAnswer）{
返回false；
}
返回true；
}
);

这是一个解决方案，允许您在不渲染父组件的情况下保持

qbox

布尔切换。通常，通过创建映射到

noState

属性的子组件，而不是在父组件中创建映射，可以使用Redux

NOUPDATE.jsx

import Qbox from "./Qbox";

const NOUPDATE = ({ uploadAnswer }) => (
  <>
    <div className="content">
      <div className="container">
        <p className="directions" />
        <Qbox />
        <button onClick={uploadAnswer}>upload</button>
      </div>
    </div>
  </>
);

const mapDispatchToProps = dispatch => ({
  uploadAnswer: value => dispatch(uploadAnswer(value)),
});

export default connect(
  null,
  mapDispatchToProps,
)(NOUPDATE);

从“/Qbox”导入Qbox；
常量NOUPDATE=（{uploadAnswer}）=>(

上传
);
const mapDispatchToProps=调度=>({
uploadAnswer:value=>dispatch（uploadAnswer（value）），
});
导出默认连接(
无效的
mapDispatchToProps，
)（最新版本）；

Qbox.jsx

const Qbox = ({noState}) => <ul className="qbox">{noState ? (<p>true</p>) : (<p>false</p>)}</ul>;

const mapStateToProps = state => ({
  noState: state.problemInfoReducer.checkMode,
});

export default connect(
  mapStateToProps
)(Qbox);

const Qbox=（{noState}）=>
{noState？（true
）：（false
）}
；
常量mapStateToProps=状态=>({
noState:state.problemInformeducer.checkMode，
});
导出默认连接(
mapStateToProps
)（Qbox）；

谢谢您的帮助！但我还有一个问题。正如您所看到的，我的“qbox”类的p标记不起作用。我只想更改p标签，对还是错。可能吗？嗯，我不太明白；你说它不起作用是什么意思？嗯，我想提前问你，我认为这可能是一个非常奇怪的问题。在我的qbox中，根据noState，p标签的内容要么为真，要么为假。它就像一个切换按钮。但是，当然，它不像切换按钮那样工作，因为它不会重新渲染。是的，这会有问题！你不能两全其美。您可以做的是创建一个单独的元素，该元素只接受

noState

，并使用Redux将其映射到

props

。然后，您可以删除此组件中的

noState

prop依赖项。我正在添加一个新的答案，希望它能满足您的需要。它可以正常工作！非常感谢。万岁，很高兴我能帮忙！