Javascript React.js异步呈现：何时将多次调用componentWillMount

我在探索反应16。这个版本的一个新特性是异步渲染（又称光纤）。据说，

componentWillMount

是不安全的，因为它可以被多次调用，有时会导致不必要的副作用。我读过这篇文档并观看了这段视频，但我找不到

组件willmount

这种行为的工作示例

在这些问题中：

据说在渲染过程中发生高优先级事件时，

componentWillMount

可能会被多次调用

因此，我尝试使用

createreact app

和react.js16.11.0自己制作。我的想法是建立一个大的反应树，并在根组件上添加css动画

JSX:

我期望平滑的动画和罕见的控制台输出，但控制台中并没有消息。我犯了什么错？如何演示对

组件willmount

函数的多次调用

Upd：

正如@DoXicK所提到的，在当前版本的React.JS中，异步呈现在默认情况下是禁用的。我按照这个指南写了这样的例子

import React from 'react';
import './App.css';

class Caption extends React.Component {
  componentWillMountCalledTimes = 0;

  componentWillMount() {
    wait(100);
    this.componentWillMountCalledTimes++;
    if (this.componentWillMountCalledTimes > 1)
      console.log(`Mounting ${this.props.depth} call ${this.componentWillMountCalledTimes}`);
  }

  render() {
    return <div>{this.props.children}</div>;
  }
}

class App extends React.Component {
  state = { counter: 0 }

  componentDidMount() {
    setInterval(() => {
      this.setState({ counter: this.state.counter + 1 });
    }, 100);
  }

  render() {
    if (this.state.counter % 10 === 0) {
      return <div>Empty</div>;
    } else {
      return (
        <div className={'App'}>
          <Caption>{'Hello 1'}</Caption>
          <Caption>{'Hello 2'}</Caption>
          <Caption>{'Hello 3'}</Caption>
        </div>
      );
    }
  }
}

function wait(time) {
  const start = Date.now();

  while (Date.now() - start < time) {
  }
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

从“React”导入React；
导入“/App.css”；
类标题扩展了React.Component{
componentWillMountCalledTimes=0；
组件willmount（）{
等待（100）；
此.componentWillMountCalledTimes++；
如果（this.componentWillMountCalledTimes>1）
log（`Mounting${this.props.depth}调用${this.componentWillMountCalledTimes}`）；
}
render（）{
返回{this.props.children}；
}
}
类应用程序扩展了React.Component{
状态={计数器：0}
componentDidMount（）{
设置间隔（（）=>{
this.setState（{counter:this.state.counter+1}）；
}, 100);
}
render（）{
if（this.state.counter%10==0）{
返回空；
}否则{
返回(
{'Hello 1'}
{'Hello 2'}
{'Hello 3'}
);
}
}
}
函数等待（时间）{
const start=Date.now（）；
while（Date.now（）-开始<时间）{
}
}
ReactDOM.createRoot（document.getElementById（'root'））.render（）；

我使用了上面示例中的CSS。我希望在一个元素上得到至少一条关于多次调用

componentWillMount

的消息（因为每个元素的渲染次数都超过，但我运气不好）

---

我想我遗漏了什么，但我不明白是什么。

我在本文中找到了一个例子：

let lastCounter=0；//用于多个装载检测的全局变量
类计数器扩展了React.Component{
组件willmount（）{
if（lastCounter==此.props.value）{
log（`mount counter with value=${this.props.value}多次`）；
}
lastCounter=this.props.value；
//同步等待100毫秒以模拟长时间工作
const start=Date.now（）；
while（Date.now（）-start<100）；
}
render（）{
返回{this.props.value}；
}
}
类应用程序扩展了React.Component{
状态={计数器：0，showGreetings:true}；
componentDidMount（）{
this.interval=setInterval（（）=>{
this.setState（{counter:this.state.counter+1}）；
}, 500);
}
组件将卸载（）{
clearInterval（这个.interval）；
}
切换问候语=（）=>{
this.setState（{showGreetings:！this.state.showGreetings}）；
};
render（）{
//使用key属性强制React.JS重新安装计数器组件
返回(
切换问候语
{this.state.showGreetings&&Hello world！}
{this.state.counter2}
);
}
}
//而不是常规初始化
//ReactDOM.render（，document.getElementById（'root'））；
//对此组件使用并发渲染
ReactDOM.createRoot（document.getElementById（'root'））.render（）

你需要添加构造函数，顺便说一句，你没有任何理由尝试学习一些不推荐使用的东西。它会给你带来什么？你最好去学习另一种死气沉沉的编码语言，它不会给你带来任何好处。这能回答你的问题吗？@eladBA你不需要构造函数。而且组件将不会被拒绝使用。学习如果是这样的话，从一个不推荐使用的语法中，仍然可以提供关于框架如何演变以及为什么引入更改的有价值的见解。@DoXicK感谢您的回答，但不幸的是，这个链接没有回答我的问题。正如我在问题中已经提到的，我看到了您的链接，它只给出了一些理论假设，并且我想要一个实际的证明。我试着自己做一个，但不起作用/

import React from 'react';
import './App.css';

class Caption extends React.Component {
  componentWillMountCalledTimes = 0;

  componentWillMount() {
    wait(100);
    this.componentWillMountCalledTimes++;
    if (this.componentWillMountCalledTimes > 1)
      console.log(`Mounting ${this.props.depth} call ${this.componentWillMountCalledTimes}`);
  }

  render() {
    return <div>{this.props.children}</div>;
  }
}

class App extends React.Component {
  state = { counter: 0 }

  componentDidMount() {
    setInterval(() => {
      this.setState({ counter: this.state.counter + 1 });
    }, 100);
  }

  render() {
    if (this.state.counter % 10 === 0) {
      return <div>Empty</div>;
    } else {
      return (
        <div className={'App'}>
          <Caption>{'Hello 1'}</Caption>
          <Caption>{'Hello 2'}</Caption>
          <Caption>{'Hello 3'}</Caption>
        </div>
      );
    }
  }
}

function wait(time) {
  const start = Date.now();

  while (Date.now() - start < time) {
  }
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);