如何阻止屏幕重新渲染更改事件?

Question

我有一个由下拉列表和图表组成的页面，下拉列表从服务器接收项目，每当用户从下拉列表中选择触发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>
);
};
```

Answer 1

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

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

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

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

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

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

componentDidMount(){
FetchMetricList();
}

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

希望我明白你想要什么。 我对你的问题有点困惑，因为你的问题的描述(在状态更改时重新渲染组件)是 react 工作的基本功能。 如果我误解了，请在下面的评论中告诉我。