Javascript 在进行事件处理练习时，为什么不'；我不需要使用componentDidMount（）方法吗？

我是新手，还在学习ReactJS的基础知识。我有一个问题是关于我正在做的一个书本上的练习

在本练习中，我需要创建一个事件处理组件，在该组件中我必须使用状态属性，我的问题是，在上一个练习中，我必须使用componentDidMount（）方法，而在我当前的事件处理练习中，我不需要它。代码示例如下所示：

      var SecondCounter = React.createClass({

      //this is our getInitialState method. It initializes the value in our 
      //component. 
      getInitialState: function() {
        return {
          sec: 0
        };
      },
      //this is our timerTick function where we add an increment of one to 
      // display it as a second everytime setInterval funct gets called. 
      //this function calls setState to update our component

      timerTick: function() {
        this.setState({
          sec: this.state.sec + 1
        });
      },

      //This function calls our setInterval function after our component
      //renders
      componentDidMount: function() {
        setInterval(this.timerTick, 1000);
      },

      //this.state displays the value of our state property
      render: function() {

        var myCompStyle = {
          color: "#66FFFF",
          fontSize: 50
        };

        var count = this.state.sec.toLocaleString();
        return (
              <h1 style={myCompStyle}>{count}</h1>
          );
      }
      /*Our component updates because whenever we call setState and update something
        in the state object, our component's render method gets automatically called.*/
    });

var SecondCounter=React.createClass({
//这是我们的getInitialState方法。它初始化
//组成部分。
getInitialState:函数（）{
返回{
第0节
};
},
//这是我们的timerTick函数，我们在其中向
//每次调用setInterval funct时，将其显示为第二个。
//此函数调用setState来更新组件
timerTick:function（）{
这是我的国家({
秒：this.state.sec+1
});
},
//此函数在组件之后调用setInterval函数
//呈现
componentDidMount:function（）{
设置间隔（this.timerTick，1000）；
},
//this.state显示状态属性的值
render:function（）{
var mycopstyle={
颜色：“66FFFF”，
尺码：50
};
var count=this.state.sec.toLocaleString（）；
返回(
{count}
);
}
/*我们的组件会更新，因为每当我们调用setState并更新某些内容时
在state对象中，会自动调用组件的render方法*/
});

对于本练习，它是一个使用ReactJS状态方法的基本计数器。在这个项目中，我必须使用所有三个API。我知道componentDidMount（）方法在我们的组件渲染后立即执行。我的假设是，在setState更新我们的sec prop之后，我们的componentDidMount（）方法会在UI中更新它

以下是我目前正在做的练习：

      var CounterParent = React.createClass({
      //We know this component is going to change because it has an initial state
      //method. 
      getInitialState: function() {
        return {
          count: 0
        };
      },

      //This is our event handler function. This is basically what gets
      //called everytime our button gets clicked. 
      increase: function(e) {
        this.setState({
          count: this.state.count + 1
        });
      },

      render: function() {
        //remember a CSS objet property always ends a block of code with a 
        //semicolon.
        var backgroundStyle = {
            padding: 50,
            backgroundColor: "#FFC53A",
            width: 250,
            height: 100,
            borderRadius: 10,
            textAlign: "center"
        };

        var buttonStyle = {
          fontSize: "lem",
          width: 30,
          height: 30,
          fontFamily: "sans-serif",
          color: "#333",
          fontWeight: "bold",
          lineHeight: "3px"
        };

        return (
          //This is where you add the count variable into your Counter2 display property.

          //Event Handling: You specify both the event you are listening for and the event
          //handler that will get called, all inside your markup. 
          <div style={backgroundStyle}>
            <Counter2 display={this.state.count}/>
            <button onClick={this.increase} style={buttonStyle}>+</button>
          </div>
        );
      }
  });

var CounterParent=React.createClass({
//我们知道这个组件将会改变，因为它有一个初始状态
//方法。
getInitialState:函数（）{
返回{
计数：0
};
},
//这是我们的事件处理函数。这基本上是
//每次点击我们的按钮都会打电话。
增加：职能（e）{
这是我的国家({
计数：this.state.count+1
});
},
render:function（）{
//请记住，CSS objet属性总是以
//分号。
变量背景样式={
填充：50，
背景颜色：“FFC53A”，
宽度：250，
身高：100，
边界半径：10，
textAlign：“居中”
};
var按钮样式={
字体大小：“lem”，
宽度：30，
身高：30，
fontFamily：“无衬线”，
颜色：“333”，
fontWeight：“粗体”，
线宽：“3px”
};
返回(
//这是将count变量添加到Counter2 display属性中的位置。
//事件处理：指定要侦听的事件和事件
//将被调用的处理程序，都在标记中。
+
);
}
});

请注意，componentDidMount（）方法不存在？为什么我不需要在事件处理练习中使用一个

同样，第一个项目的目的就像一个计时器。它只数到秒，永远不会结束

第二个项目是点击计数器。所以每次我点击按钮，一个计数属性就会更新。本练习不使用componentDidMount（）方法

React中有许多生命周期挂钩。如果你需要它们，你可以使用其中的任何一种，但是你会经常忽略绝大多数

可以找到这些方法的完整列表

在您的第一个示例中，之所以需要

componentDidMount

钩子，是因为您希望在安装组件时运行函数（因此是生命周期方法名称）。该函数（

setInterval

）是一个核心javascript方法，它启动一个计时器，然后每N毫秒执行一个函数

具体而言

setInterval(this.timerTick, 1000);

表示“每1000毫秒（或每1秒）开始运行

this.timerTick

”

---

您的第二个组件根本不需要在“挂载”时触发任何东西。因此，钩子被无害地忽略。

因此第一个练习需要它，因为在组件初始化并装入之后，它调用了componentDidMount（）方法，该方法调用了setInterval（）方法，从而创建了秒的累积。我明白。是的，就是这样！