反应 - 严格模式关闭，功能组件在第一次 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) ，您正在重新渲染组件。