react-组件状态

倒计时组件
Tick.js

// 倒计时
import React, { Component } from 'react'

export default class Tick extends Component {
  constructor(props) {
    super(props)
    // state必须初始化且必须为对象,否则默认为undefined
    this.state = {
      left: this.props.number
    }
  }
  // 使用setState时防止react出警告调用此函数
  componentDidMount() {
    let timer = setInterval(()=> {
      // 每次调用会重新渲染,每次赋值会使用覆盖state而不是替换state
      this.setState({
        left: this.state.left - 1
      })
      if (this.state.left === 0) {
        clearInterval(timer)
      }
    }, 1000)
  }
  render() {
    return (
      <h1>倒计时: {this.state.left} </h1>
    )
  }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import Tick from './components/Tick';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Tick number={10} />
  </React.StrictMode>
);

组件状态

组件状态: 组件可以自行维护的数据
目前组件状态近在类组件中有效
状态(state),是一个对象,本质上是类数组的一个属性

状态的改变

不要直接改变state的值,因为react无法监控state的变化

	// 不要使用类似如下代码更改state
	this.state.left = 123

必须使用this.setState({})改变状态, 此函数会触发组件的重新渲染

组件中的数据

1. props: 该数据由组件使用者传递,不要去更改这里的数据
2. state: 该数据由组件自身创建,用this.setState({})改变