为什么Antd Form每次更改表单的值组件会重新渲染

Question

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { Form, Input } from "antd";
import "antd/dist/antd.css";

import "./styles.css";

function App({ form }) {
  const { getFieldDecorator } = form;

  useEffect(() => {
    // 如果我useEffect里面需要用到 form，
    console.info("为什么你又运行了？");
  }, [form]);
  return (
    <div className="App">
      <h1>为什么输入值每次form都会变？</h1>
      <Form>
        <Form.Item label="E-mail">
          {getFieldDecorator("email", {
            rules: [
              {
                type: "email",
                message: "The input is not valid E-mail!"
              },
              {
                required: true,
                message: "Please input your E-mail!"
              }
            ]
          })(
            <Input
              placeholder="输入试试"
              style={{ width: 150 }}
              autoComplete={false}
            />
          )}
        </Form.Item>
      </Form>
    </div>
  );
}

App = Form.create()(App);

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

为什么每次输入表单控件的值，整个组件就重新渲染了？

示例链接

Answer 1

use-effect 不就是这样的吗？
https://overreacted.io/zh-han...

你监听了 form，那就会在 form 改变的时候执行啊