Reactjs 反应-严格模式关闭，仅在第一次状态更改后第二次构造功能组件

我不明白为什么在状态改变时函数组件（非类组件不会与函数组件混淆）会被构造两次

我的理解是，函数只需像类的组件构造函数一样构造一次

注意：React未在严格模式下运行

示例代码：

index.js:

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

const rootElement=document.getElementById（“根”）；
render（，//注意没有严格模式
根元素
);

例如1:一次调用的日志语句-简单而明显：

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

函数App1（）{
console.log（“应用程序构造”）；
回复你好；
}

例如2:日志语句调用了两次-不太明显，但可能是由于setDidMount造成的：

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

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

  return <div>Hello</div>;
}

函数App2（）{
console.log（“应用程序构造”）；
const[didMount，setDidMount]=useState（false）；
useffect（（）=>{
setDidMount（真）；
}, []);
回复你好；
}

例3:日志语句调用了两次。无论有多少独立状态变量：

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>;
}

函数App3（）{
log（“应用程序构造：“+i++”）；
const[didMount，setDidMount]=useState（false）；
const[someState，setSomeState]=useState（“空”）；
useffect（（）=>{
setDidMount（真）；
}, []);
useffect（（）=>{
设置状态（“完全”）；
}, []);
回复你好；
}

最终类组件

例如4:日志语句调用一次-如预期的那样

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>;
  }
}

类App4扩展组件{
构造函数（）{
超级（）；
此.state={
迪德蒙特：错
};
log（“应用程序构造：“+i++”）；
}
componentDidMount（）{
这是我的国家({
迪德蒙特：是的
});
}
render（）{
回复你好；
}
}

我的理解是，函数只需像类的组件构造函数一样构造一次

---

它根本不是构造的，那只是类的东西。将log语句放入函数组件的主体中大致相当于将其放入类组件的

render

方法中。因此，您的日志会告诉您组件渲染了多少次。设置状态会导致呈现（通常），因此通过调用

setDidMount（true）

，您将重新呈现组件。

感谢您的响应。引导问题：您将在何处实例化类似

constapi=newapi（window.location）这样的东西在以下情况下：1。其SSR和窗口不可用。无法从process.env读取window.location，因为它可以是多个子域，即：domain.com和dashboard.domain.com 3。您希望此实例作为单例，因此除了window.location更改之外，没有任何道具更改影响它？注意：在执行SSR时，window.location在componentDidMount或useEffect（）等方法中可用。我没有使用SSR的经验。你应该把这当作一个新问题来问。我会的，谢谢：）。因此，在非SSR场景中，实例化函数之外的任何内容等同于实例化类组件构造函数中的内容？