react学习—组件状态

一、组件状态

//components/Timer.js
import React, { Component } from 'react'

export default class Tick extends Component {
  render() {
    return (<h1>{this.props.time}</h1>);
  }
}

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Timer from './components/Timer'

let time = 10;
function Tick(){
  setInterval(()=>{
    ReactDOM.render(<Timer time={time} />, document.getElementById('root'));
    time --;
  },1500);
}
Tick();

我们想设置一个捡漏的倒计时组件，但是这里我们发现，为什么要在外部进行计时呢？计时组件应该本身就应该完成这个功能。

那么这里就需要使用组件自己的状态了。

1、状态初始化

组件状态：组件可以自行维护的数据

组件状态仅在类组件中有效

状态（state），本质上是类组件的一个属性，是一个对象。

import React, { Component } from 'react'

export default class Tick extends Component {
  constructor(props){
    super(props);
    this.state = {
      time : this.props.time
    }
  }
  render() {
    return (<h1>{this.props.time}</h1>);
  }
}

那么我们使用了组件自己的额状态，那么怎么在状态变化时重新渲染页面呢？

2、状态的变化

不能直接改变状态：因为React无法监控到状态发生了变化

必须使用this.setState({})改变状态(数据属于谁，谁有权改变)

一旦调用了this.setState，会导致当前组件重新渲染

import React, { Component } from 'react'

export default class Tick extends Component {
  constructor(props){
    super(props);
    this.state = {
      time : this.props.time
    };
    this.timet = setInterval(()=>{
      this.setState({//原理类似Object.assign
        time: this.state.time - 1
      });//传入一个对象，会混入原来的state，重复的会覆盖
    },1500);
  }
  render() {
    return (<h1>{this.state.time}</h1>);
  }
}

也可以像以下写法。

import React, { Component } from 'react'

export default class Tick extends Component {
  state = {//JS Next 语法，目前处于实验阶段
    time : this.props.time
  };
  constructor(props){
    super(props);
    this.timet = setInterval(()=>{
      this.setState({
        time: this.state.time - 1
      });
    },1500);
  }
  render() {
    return (<h1>{this.state.time}</h1>);
  }
}

1. props：该数据是由组件的使用者传递的数据，所有权不属于组件自身，因此组件无法改变该数组
2. state：该数组是由组件自身创建的，所有权属于组件自身，因此组件有权改变该数据

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！