react不允许的情况下为什么我可以提前返回？

Question

import React,{useState} from 'react';

function Car() {
  const [count, setCount] = useState(0);
  return <h2>a Car!</h2>;
}

export function App(props) {
  const [count, setCount] = useState(0);
 
  if(count===3) return ;
  let b=<Car/>
  return (
    <div className='App'>
      <Car/>    
      <button onClick={() => setCount(count + 1)}>
        Click me {count}
      </button>
    </div>
  );
}

在顶层渲染应用程序 usestate 时运行良好。但是当我们按下按钮 3 次时计数达到 3 时，它不会提前返回渲染。但是汽车组件中有一些钩子没有运行。所以对于钩子来说，它没有渲染汽车中的钩子部分，这不算提前返回。所以所有的钩子都没有运行。你能解释一下吗？

Answer 1

在早期返回状态下，Car 功能组件永远不会运行，因此其中也没有任何代码/挂钩。

但是，您也在 App 功能组件的顶部运行状态挂钩，这就是 App 仍然能够访问名为

count

的状态变量的原因。

这两个状态是独立的，不会互相影响，因为它们是在单独的组件中创建的。 Car 组件在代码中的位置并不重要，因为它是一个函数，除非在某个地方使用了 Car 组件，否则里面的代码不会运行。