如何观察 react.js 的变化？

Question

在 AngularJS 中，我观察到这样的变化。

$scope.$watch("rateMode",
function (newVal, oldVal) {
if (newVal != oldVal && timeRange != "") {
  if (typeof $scope.onRateCallback != undefined) {
    $scope.onRateCallback($scope.chartDataObject, newVal);
  }
  updateChart(timeRange);
}
},
true
);

我怎样才能在 ReactJS 中做到这一点？

Answer 1

要在组件渲染时观察 React 的变化，你可以使用useEffect 钩子

useEffect 有两个参数，第一个是回调函数，第二个是依赖数组。

在回调函数中，您可以在 useEffect 运行时编写您想要执行的操作。 在依赖数组中传递状态或道具，每当依赖数组中传递的变量发生变化时，它都会再次运行 useEffect。

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

function Example() {
  const [count, setCount] = useState(0);

  // Here, useEffect runs on first render and after whenever count is changed
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times.</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Answer 2

从问题看来，您需要根据代码的更改来更新 ui。 请尝试在 React 中使用 useState。

const [rateMode, setRateMode] = useState();

并使用 rateMode 变量进行渲染。 当调用 setRateMode 并更新速率模式时，UI 将呈现更改。

如果您有变量或 useState 并想观看，请使用

useEffect hook