组件渲染两次？[副本]

Question

1. 我有一个应用程序组件和测试组件

应用程序组件

import React from "react";
import "./styles.css";
import Test from "../Test";

export default function App() {
  return (
    <div className="App">
      {console.log("rendering [APP]")}
      <Test />
      <h1>Check your console</h1>
      <h2>why test component renders twice?</h2>
      <h2> Event the test component renders twice for every key press</h2>
    </div>
  );
}

测试组件：

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

const Test = () => {
  const [values, setValues] = useState({
    email: "",
    password: "",
    error: false,
    loading: false,
    didRedirect: false
  });

  const { email, password, error, loading, didRedirect } = values;
  const handleChange = name => {
    return event => {
      setValues({
        ...values,
        error: false,
        [name]: event.target.value
      });
    };
  };

  const errorMessage = (
    <div
      className="alert alert-danger"
      style={{ display: error ? "block" : "none" }}
    >
      {error}
    </div>
  );

  const onSubmit = event => {
    event.preventDefault();
    setValues({ ...values, loading: true });
  };

  const signInForm = (
    <div className="row">
      <div className="col-md-4 offset-md-4">
        <form>
          {errorMessage}
          <div className="form-group">
            <label className="text-light">Email</label>
            <input
              className="form-control"
              onChange={handleChange("email")}
              value={email}
              type="text"
            />
          </div>

          <div className="form-group">
            <label className="text-light">Passsword</label>
            <input
              className="form-control"
              type="password"
              value={password}
              onChange={handleChange("password")}
            />
          </div>
          <button className="btn btn-success btn-block" onClick={onSubmit}>
            Submit
          </button>
        </form>
      </div>
    </div>
  );

  return (
    <div>
      {console.log("rendering [test]")}
      {signInForm}
    </div>
  );
};

export default Test;



In short:

what i expected in console:
rendering [APP] 
rendering [test]

what i actually got:
rendering [APP] 
rendering [test]
rendering [test]

Answer 1

因此，由于useState钩子的使用，您的测试组件将被第二次呈现。您的组件需要保持状态最新，因此每次状态更改时都必须重新加载。您有一个handleChange函数，它将触发每个输入更改，该函数将更改状态和组件重新加载。这就是react的基本工作原理。希望我能帮助你。

Answer 2

我认为这是因为codesandbox使用反应开发工具。我发现了一个封闭式的问题

https://github.com/facebook/react-devtools/issues/1333

因为在其他环境中，我们只有一个控制台。日志

这是来自@ravibagul91的演示

https://stackblitz.com/edit/react-qekebe