next.js 当更新的状态与以前的相同时防止渲染

vulvrdjw 于 2023-08-04 发布在其他

关注(0)|答案(1)|浏览(147)

是否有一个react生命周期方法，我们可以使用它来执行重新渲染，只有当更新的状态与以前的状态不同时。例如，在下面的代码中：

class App extends Component {
  constructor() {
    super();
    this.state = {
      value: "abcd"
    };
  }

  handlePress = () => {
    this.setState({ value: "abcd" });
  };

  render() {
    console.log("render");
    return (
      <div>
        <h1>{this.state.value}</h1>
        <button onClick={this.handlePress}>Press</button>
      </div>
    );
  }
}

字符集
您可以看到，在按下按钮时，即使状态与前一个相同，它仍然会导致render()函数运行。
我知道我们可以使用shouldComponentUpdate()或PureComponent来防止这种情况，但是否有其他方法/生命周期方法可以实现这一点？
我还创建了一个上面代码here的沙盒/Playground。

next.js

来源：https://stackoverflow.com/questions/76787213/prevent-renders-when-updated-state-is-same-as-previous

1条答案

按热度按时间

0x6upsns1#

如果您使用的是功能性组件，则可以使用React.memo来实现这一点。

import React, { useState, memo } from 'react';

const App = () => {
  const [value, setValue] = useState("abcd");

  const handlePress = () => {
    setValue("abcd");
  };

  console.log("render");

  return (
    <div>
      <h1>{value}</h1>
      <button onClick={handlePress}>Press</button>
    </div>
  );
};

export default memo(App);

字符集
对于类组件，可以使用shouldComponentUpdate，但必须手动比较更改。

shouldComponentUpdate(nextProps, nextState) {
  return nextState.value !== this.state.value;
}

型

编辑

React.memo只跟踪props，不跟踪state。
感谢@Oktay Yuzcan指出这一点。

赞(0）回复(0）举报 2023-08-04

我来回答

next.js 当更新的状态与以前的相同时防止渲染

1条答案

编辑

相关问题

热门标签

最新问答