Question

我是新手，仍然在学习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.*/
    });

对于本练习，它是一个使用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>
        );
      }
  });

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

第一个项目目的也就像一个计时器。它只是数秒而且永远不会结束。

第二个项目是点击计数器。因此，每次单击按钮时，计数属性都会更新。本练习不使用componentDidMount（）方法。

Answer 1

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

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

第一个示例中需要componentDidMount挂钩的原因是因为您希望在安装组件时运行函数（因此生命周期方法名称）。该函数（setInterval）是一个核心javascript方法，它启动一个计时器，然后每N毫秒执行另一个函数。

具体而言;

setInterval(this.timerTick, 1000);

意味着＆＃34;每1000毫秒（或每1秒）开始运行this.timerTick＆＃34;。

你的第二个组件根本不需要触发任何东西＆＃34;在mount＆＃34;上。所以钩子无害地被忽略了。

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

1 个答案: