当更新状态与之前相同时阻止呈现-解网

问：

有没有一种 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

我还在这里创建了上述代码的沙盒/游乐场。

JavaScript reactjs next.js react-class-based-component（基于反应类的组件

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 只跟踪道具，不跟踪状态。

感谢 @Oktay Yuzcan 指出这一点。

当更新状态与之前相同时阻止呈现

Prevent renders when updated state is same as previous

评论

编辑

评论