How to setParams using useEffect and avoid getting infinty renderings?

在React中，useEffect钩子用于在组件渲染后执行副作用操作，比如发起网络请求、手动修改DOM等。正确地使用useEffect钩子并且避免不精确的渲染，主要涉及到两个方面：合理设置依赖数组和正确处理副作用的清除。

合理设置依赖数组

useEffect的第二个参数是依赖数组，它决定了useEffect何时重新执行。如果你的effect依赖于某些外部变量或props，这些依赖项应该包括在数组中。否则，你可能会遇到过时数据的问题，从而导致不精确或错误的渲染。

示例：

假设我们有一个组件，该组件需要根据用户的选择从API获取数据。

jsx
const [data, setData] = useState(null);
const [userId, setUserId] = useState(1);

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch(`https://api.example.com/data/${userId}`);
    const result = await response.json();
    setData(result);
  };

  fetchData();
}, [userId]); // 依赖数组包含userId

这里，只有当userId变化时，才会重新触发useEffect内的函数，这保证了每次用户ID变化时，界面上显示的数据都是最新的。

正确处理副作用的清除

有些副作用需要在组件卸载或依赖变化前进行清理，以避免内存泄漏或不必要的操作。比如，如果你在useEffect中订阅了某些事件，那么你应该在副作用的返回函数中取消这些订阅。

示例：

jsx
useEffect(() => {
  const handleResize = () => {
    console.log('Window resized');
  };

  window.addEventListener('resize', handleResize);

  // 清理函数
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // 空依赖数组意味着effect只在挂载时执行一次

在这个例子中，我们添加了一个窗口尺寸变化的事件监听器，并且在组件卸载时，通过返回的函数移除了这个监听器。这样可以防止组件卸载后还执行相关的事件处理函数。

总结来说，合理地使用useEffect并设置正确的依赖数组，以及在必要时进行适当的清理，是确保React组件正确且高效渲染的关键。通过这些措施，我们可以避免不必要的重渲染和潜在的性能问题。