Question

我正在使用功能组件和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);

uploadAnswer每次分配noState都会将其反转。因此，如果我每次都调度uploadAnswer，则noState将更新，并且整个屏幕将重新呈现。即使更新noState，我也不想重新渲染屏幕。

Answer 1

这是一个解决方案，可让您保留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.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);

Answer 2

您可以使用React.memo来记住您的组件。传递给React.memo的第二个参数是一个采用oldProps和newProps的函数。当应更新组件时，返回false。

下面，仅当false和uploadAnswer之间的oldProps不匹配时，我才返回newProps，这是组件唯一的一次重新渲染。 / p>

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

使用功能组件更改状态时如何防止重新渲染做出反应

2 个答案: