反應 - 嚴格模式關閉，功能組件在第一次 state 更改后第二次構建

Question

我很困惑為什么 function 組件（非 class 組件不會與功能混淆）在 state 更改時構造兩次？

我的理解是 function 就像類的組件構造函數一樣構造一次？

注意： React 沒有在嚴格模式下運行。

密碼沙盒

示例代碼：

index.js：

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, // notice no strict mode
  rootElement
);

例如 1： LogStatement 調用一次 - 簡單明了：

function App1() {
  console.log("App constructed");
  return <div>Hello</div>;
}

例如 2： LogStatement 調用了兩次 - 不是很明顯，但可能是由於 setDidMount？ ：

function App2() {
  console.log("App constructed");
  const [didMount, setDidMount] = useState(false);

  useEffect(() => {
    setDidMount(true);
  }, []);

  return <div>Hello</div>;
}

例如 3： LogStatement 調用了兩次。 不管有多少個獨立的 state 變量：

function App3() {
  console.log("App constructed:" + i++);

  const [didMount, setDidMount] = useState(false);
  const [someState, setSomeState] = useState("empty");

  useEffect(() => {
    setDidMount(true);
  }, []);

  useEffect(() => {
    setSomeState("full");
  }, []);

  return <div>Hello</div>;
}

最后是 class 組件

例如 4: LogStatement 調用一次 - 正如預期的那樣

class App4 extends Component {
  constructor() {
    super();
    this.state = {
      didMount: false
    };
    console.log("App constructed:" + i++);
  }

  componentDidMount() {
    this.setState({
      didMount: true
    });
  }

  render() {
     return <div>Hello</div>;
  }
}

Answer 1

我的理解是 function 就像類的組件構造函數一樣構造一次？

它根本沒有構造，那只是 class 的東西。 將日志語句放在 function 組件的主體中，大致相當於將其放在 class 組件的render方法中。 所以你的日志告訴你組件渲染了多少次。 設置 state 會導致渲染（通常），因此通過調用setDidMount(true) ，您正在重新渲染組件。