react的组件state

最新推荐文章于 2024-07-19 12:58:53 发布

tmacer

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量82

点赞数

文章标签： react javascript

本文链接：https://blog.csdn.net/tmacer/article/details/104384241

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    // 当 Clock 的输出插入到 DOM 中时，React 调用 componentDidMount() 生命周期钩子。 在其中，Clock 组件要求浏览器设置一个定时器，每秒钟调用一次 tick()。
    this.timerID = setInterval(
    //这里是因为回调函数this指向会出现问题，所以用es6箭头函数
    //如果不想用也可以在外面定义_this= this，然后再用_this替代this使用
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    // this.timerID 为定时器的 ID，我们可以在 componentWillUnmount() 钩子中卸载定时器。
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('example')
);

</script>

</body>
</html>

// state实例解析：

// componentDidMount() 与 componentWillUnmount() 方法被称作生命周期钩子。

// 在组件输出到 DOM 后会执行 componentDidMount() 钩子，我们就可以在这个钩子上设置一个定时器。

// this.timerID 为定时器的 ID，我们可以在 componentWillUnmount() 钩子中卸载定时器。

// 代码执行顺序：

// 1.当被传递给 ReactDOM.render() 时，React 调用 Clock 组件的构造函数。由于 Clock 需要显示当前时间，所以使用包含当前时间的对象来初始化 this.state 。我们稍后会更新此状态。

// 2.React 然后调用 Clock 组件的 render() 方法。这是 React 了解屏幕上应该显示什么内容，然后 React 更新 DOM 以匹配 Clock 的渲染输出。

// 3.当 Clock 的输出插入到 DOM 中时，React 调用 componentDidMount() 生命周期钩子。在其中，Clock 组件要求浏览器设置一个定时器，每秒钟调用一次 tick()。

// 4.浏览器每秒钟调用 tick() 方法。在其中，Clock 组件通过使用包含当前时间的对象调用 setState() 来调度UI更新。通过调用 setState() ，React 知道状态已经改变，并再次调用 render() 方法来确定屏幕上应当显示什么。这一次，render() 方法中的 this.state.date 将不同，所以渲染输出将包含更新的时间，并相应地更新 DOM。

// 5.一旦 Clock 组件被从 DOM 中移除，React 会调用 componentWillUnmount() 这个钩子函数，定时器也就会被清除。

tmacer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react的组件state

<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Hello React!</title><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"...
复制链接

扫一扫