反应JS |实施状态和生命周期

到目前为止，我们已经了解了 React Web 应用程序是什么，React 组件的状态和生命周期。我们还创建了一个基本时钟，使用一个函数来每秒重新渲染页面，如果您认为可以使用或不使用 React 来实现。 React 不推荐使用多个渲染，而是使用有状态的方法，一旦状态改变，页面就会重新渲染。
我们这篇文章的目标是使用我们在上一篇文章中编写的代码，并创建一个有状态的解决方案来帮助我们实现相同的结果。首先让我们回顾一下我们在上一篇文章中开发的内容，

打开你的 react 项目目录并编辑 src 文件夹中的Index.js文件：

源索引.js：

javascript

import React from 'react';
import ReactDOM from 'react-dom';
 
function showTime()
{
const myElement = (
                   

                        
Welcome to GeeksforGeeks!
                        
{new Date().toLocaleTimeString()}
                   
                  );
  
ReactDOM.render(
      myElement,
      document.getElementById("root")
);                   
}
  
setInterval(showTime, 1000)

现在上面例子中的组件是什么？实际上，如果您注意，则没有任何组件。我们正在分配一个名为“myElement”的嵌套 JSX 元素以包含最新时间并每秒渲染相同的时间，这是使用 React 实现的最糟糕的方法之一。现在我们将开始使用需要有类组件的状态和生命周期方法来实现它，让我们从预先创建一个开始。

打开你的 react 项目目录并编辑 src 文件夹中的Index.js文件：

源索引.js：

javascript

import React from 'react';
import ReactDOM from 'react-dom';
 
class Clock extends React.Component {
}

现在我们已经将类定义为“时钟”，我们必须首先考虑该过程。 “道具”是一组很少改变的属性，而“状态”是一组应该随时间变化的可观察属性。现在，如果我们考虑一下我们自己的情况，我们的时钟正好有两个部分，一个是标题“欢迎来到 GeeksforGeeks！”这应该使用 props 来实现，因为它在整个生命周期中都不会改变；另一部分是应该每秒更改的时间本身。让我们只使用构造函数和渲染方法首先创建主干方法来显示标题和时间，而不是定期更新它。

javascript

import React from 'react';
import ReactDOM from 'react-dom';
 
class Clock extends React.Component {
    constructor(props)
    {
        super(props);
        this.state = { time : new Date() };
    }
 
    render()
    {
        return (
            
Welcome to { this.props.title } !
        
{this.state.time}
    );
  }
}
 
ReactDOM.render(
  ,
            document.getElementById('root'));

现在我们已经创建了自己的组件 Clock 并渲染了我们需要的东西，我们只需要找出一种每秒更新时间的方法。现在很明显，我们必须设置一个间隔来每秒更新状态，这应该在安装时钟组件后立即完成。因此，我们必须使用生命周期函数componentDidMount() 来设置更新状态的间隔，为了使应用程序高效，我们将使用 componentWillUnmount() 方法来清除间隔。让我们看看下面的实现。

打开你的 react 项目目录并编辑 src 文件夹中的Index.js文件：

源索引.js：

javascript

import React from 'react';
import ReactDOM from 'react-dom';
 
class Clock extends React.Component {
    constructor(props)
    {
        super(props);
        this.state = { time : new Date() };
    }
 
    // As soon as the Clock is mounted.
    // Start the interval "timer".
    // Call tick() every second.
    componentDidMount()
    {
        this.timer = setInterval(
            () => this.tick(),
            1000);
    }
 
    // Before unmounting the Clock,
    // Clear the interval "Timer"
    // This step is a memory efficient step.
    componentWillUnmount()
    {
        clearInterval(this.timer);
    }
 
    // This function updates the state,
    // invokes re-render at each second.
    tick()
    {
        this.setState({
            time : new Date()
        });
    }
 
    render()
    {
        return (
            
Welcome to { this.props.title } !
        
{this.state.time.toLocaleTimeString()}
    );
  }
}
 
ReactDOM.render(
  ,
            document.getElementById('root'));

恭喜！您刚刚使用状态、道具和一些生命周期方法创建了一个 React Web 应用程序。你可能会问，仅此而已？不，它甚至不是整个拼盘的一小部分，请继续关注即将发布的文章，我们将深入研究 React 并在旅途中创建更多项目。