useEffect 在计数器更改时重新渲染整个表答案

【问题标题】：useEffect rerender the whole table when counter changinguseEffect 在计数器更改时重新渲染整个表
【发布时间】：2022-11-21 16:58:40
【问题描述】：

我对 useEffect 有一些疑问。当计数器发生变化时，它会导致整个表被重新渲染，但我没有将计时器作为表中的道具传递。我怎样才能防止这种行为？

function App() {

  const dispatch = useDispatch();
 
  const data = useSelector(state => state.data);

  const [error, setError] = useState("");

  const [counter, setCounter] = useState();
  useEffect(() => {

    const fetchData = async (setError, setCounter) => {
      try {
        const response = await axios(url, token);

        dispatch(getData(response.data.value));
       
        setError("");
        setCounter(180);
      } catch(e) {
        setError("Error!");
        setCounter(180);
        
      }}

    fetchData(setError, setCounter);
    
    const interval = setInterval(() => {
      fetchData(setError, setCounter);
    }, timeToReload * 1000);

    const countInterval = setInterval(() => 
    setCounter((prev) => prev - 1), 1000)

    return () => {
      clearInterval(interval);
      clearInterval(countInterval);
    }

  },[dispatch])

  
  const dataForTable = selectorData([...data], {name: sortArrow.columnName, order: sortArrow.sortOrder, type: sortArrow.type})

  return (
    <div className="App">

      <div className="headerWrapper">

        
       <div 
        
          className={error ? "LoadingStatus disconnect": "LoadingStatus connect"}>
            {error && <div>{error}</div>}
            {isFinite(counter) && <div>{"Reload " + counter + " sec"}</div> }
        </div>

      </div>

      <Table specialCategory={specialCategory} data={dataForTable} sortArrow={sortArrow} setSortArrow={setSortArrow}/>

    </div>
  );
}

export default App;

我尝试在没有 useState 的情况下使用 useRef，但没有任何改变。也许 Table 组件中的另一个道具触发了变化？

重要提示：只修改表体。

【问题讨论】：

由于 data 每次重新呈现 App 组件时都是新的，因此表数据会获取新数据..

标签： reactjs react-hooks infinite-loop

【解决方案1】：

见Here the Reasons of React Re-rendering：

如果父组件重新渲染，子组件会自动重新渲染。 & 因为你的计数器状态在 Table Components parent 上，它会在每次 Counter 改变时重新渲染。

【讨论】：

【解决方案2】：

当您更新 App 组件的状态（例如 setCounter(...)）时，它会导致整个组件及其所有子组件（包括 <Table/>）重新呈现。

您可以为除表之外的所有内容创建一个新组件，并将正在更改的状态（error 和 counter）放入该文件，或者像这样记忆表组件：

import { memo } from "react";

function Table(props) {

  return (
    // [...] Your Table component.
  );
}

export default memo(Table);

并像您已经做的那样导入它。这将避免重新渲染表格，除非它的道具发生变化。

【讨论】：