为什么挂钩的代码（功能）一直在渲染？（与 Class 相比）

Question

我刚开始反应...

此代码仅在 3 秒后使用布尔值呈现。

但是下面的代码一直在渲染..渲染..渲染...几乎每三秒一次。

import React, { useState } from "react";

const App = () => {
  const [isLoading, setIsLoading] = useState(true);

  setTimeout(() => {
    setIsLoading(!isLoading);
  }, 3000);

  return <h1>{isLoading ? "Loading" : "we are ready"}</h1>;
};

export default App;

但是这段代码运行良好。这是什么原因？

import React, { Component } from "react";

class App extends React.Component {
  state = {
    isLoading: true,
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        isLoading: false,
      });
    }, 3000);
  }

  render() {
    return <div>{this.state.isLoading ? "Loading..." : "we are ready"}</div>;
  }
}

export default App;

Answer 1

因为您正在用状态中的真值初始化 isLoading。每当状态发生变化时，功能组件都会重新呈现，并且在基于 Class 的组件中不会发生这种情况，因为您使用了组件生命周期方法。您应该在功能组件中使用“useEffect”。

  useEffect(() => {
    setTimeout(() => {
      setIsLoading(!isLoading);
    }, 3000);
  });

你可以在这里阅读 https://reactjs.org/docs/hooks-effect.html

Answer 2

每次渲染都会调用一个函数组件。这意味着在状态更改后的每次重新渲染时也会创建超时，就像在您的第一个示例中那样实现时。要使用组件生命周期，您应该使用 useEffect 挂钩：https://reactjs.org/docs/hooks-reference.html#useeffect

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

const App = () => {
  const [isLoading, setIsLoading] = useState(true);

  // Set a timeout ONCE when the component is rendered for the first time
  // The second argument [] signifies that nothing will trigger the effect during re-renders
  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 3000);
  }, [])

  return <h1>{isLoading ? "Loading" : "we are ready"}</h1>;
};

export default App;

Answer 3

不幸的是，MubtadaNaqvi 的回答会导致无限循环。您应该正确应用 useEffect：

  useEffect(() => {
    setTimeout(() => {
      setIsLoading(isLoading => !isLoading);
    }, 1000);
  }, [])

为什么挂钩的代码（功能）一直在渲染？（与 Class 相比）

Why does the code(funtional) for the hook keep rendering? (compared to Class)

javascript

reactjs

react-lifecycle

react-hooks

react-state

为什么挂钩的代码（功能）一直在渲染？ （与 Class 相比）

Why does the code(funtional) for the hook keep rendering? (compared to Class)

javascript

reactjs

react-lifecycle

react-hooks

react-state

为什么挂钩的代码（功能）一直在渲染？（与 Class 相比）