如何阻止屏幕重新渲染 onChange 事件？答案

【问题标题】：How to stop the screen from re-rendering onChange event?如何阻止屏幕重新渲染 onChange 事件？
【发布时间】：2019-06-17 23:25:41
【问题描述】：

我有一个由下拉列表和图表组成的页面，下拉列表从服务器接收项目，每当用户从下拉列表中选择某些内容时，触发 handleSelectionChange() 事件更新本地状态下的当前选择，整个 MetricList () 再次被执行，

在下面的代码中，每次我进行下拉选择时，“console.log("TESTING") 都会继续记录。

当我在下拉列表中选择某些内容时，我应该怎么做，它只会改变本地状态？

const MetricList = () => {
  ///get the list of metrics for dropdown
  FetchMetricList(); 

  //get dropdown data from the redux store.
  const { getMetrics } = useSelector(getMetric);

  //craete local state called metricSelected
  const [metricSelected, setGreeting] = useState([]);

  //loading spinner if no data arrives
  if (!getMetrics) return <CircularProgress />;

  //create dropdown data using Data from getMetrics
  let data = [];
    getMetrics.forEach(value => {
      let obj = { key: value, text: value, value: value };
      data.push(obj);
    });

  // FOR TESTING PURPOSE
  console.log("TESTING")

  //when user make selection in dropdown, update local state
  const handleSelectionChange = (event, { value }) => {
    setGreeting( [value] );
  };

  return (
    <div>
      <Dropdown
        placeholder="Select..."
        fluid
        multiple
        selection
        data={data}
        style={{ width: "500px" }}
        onChange={handleSelectionChange}
      />
      <Charts
        dataSelected={metricsSelected}
      />
    </div>
  );
};
```

【问题讨论】：

标签： javascript reactjs function react-hooks react-component

【解决方案1】：

您所描述的是反应是如何工作的。如果组件中的状态发生更改，它将重新渲染该组件。现在，每次MetricList 组件中的状态更改时，MetricList 组件都会重新渲染。

您是否希望组件中的某些内容仅在初始渲染时执行？

如果是这种情况，您需要使用类似useEffect 的钩子，并且只在初始渲染时渲染它，或者使用基于类的组件并在componentDidMount() 或componentWillMount() 中运行它。

例如，如果您只希望 FetchMetricList() 在初始渲染时运行一次，您可以执行以下操作：

useEffect(() => {
  FetchMetricList()
}, []);

或者在基于类的组件中，您可以这样调用它：

componentDidMount(){
  FetchMetricList();
}

否则它将像现在发生的那样在每个渲染上运行。不确定这是否是您不想在每次渲染时都运行的功能，但这只是一个示例。但这就是使用基于状态的组件系统的本质。每次组件状态更改时，都会重新渲染该组件。

希望我明白你想要什么。我对您的问题感到有些困惑，因为对您的问题的描述（在状态更改时重新渲染组件）是反应如何工作的基本功能。如果我误解了，请在下面的 cmets 中告诉我。

【讨论】：