时间戳

首页 > 解决方案 > 当自更新道具发生变化时如何进行反应组件更新？

javascript - 当自更新道具发生变化时如何进行反应组件更新？

问题描述

我有一个可以自我更新的对象。假设它每秒钟都会改变它的状态。

export class Obj {

  val = 0;

  start = () => {
    setInterval(() => {
     this.update();
    }, 1000);
  }

  update = () => {
    this.val++;
  }

}

我认为（如果我错了，请纠正我）类似的替代方案是连接到数据流的对象，每隔几毫秒将其状态更改为收到的最后一个值。

我现在想要一个显示这个的反应组件（使用钩子）：

function C(obj) {

  return <div>{obj.val}</div>

}

C我的问题是，当 val 更改时，如何使组件obj更改？我可以在每次更改时使用回调，但感觉就像我只是为了 React 而污染我的模型。另一种方法是将间隔移到ObjReact 组件之外，但这可能不是我想要的，并且不会涵盖流的情况。

当组件的某些道具更改其状态时，React 中是否有标准方法来更新（基于函数的、基于钩子的）组件？

标签： javascriptreactjs

解决方案

在这种情况下，组件C不会被重新渲染，因为它的 props ( obj) 从未更改过。对象通过引用进行比较，因为它与什么都没有发生之前的对象引用相同。

您可以使用C这样的组件使其重新渲染：<C value={obj.val} />，因此在每次obj.val更新时它都会做出相应的反应，因为它的道具现在正在改变。

你也可以在里面有这个逻辑：

const obj = new Obj();

function C() {
  const [value, setValue] = React.useState(0);
  
  React.useEffect(() => {
    const interval = setInterval(() => {
      setValue(value + 1);
    }, 1000);

    return () => {
      clearInterval(interval); // don't forget to do cleanup
    }; 
  }, []);

  return <div>{value}</div>
}

推荐阅读