React状态 react state

# 什么是状态管理工具?（vuex）

react state相当于vue的date，但是跟vue的用法不一致

constructor 属性返回对创建此对象的数组函数的引用

单组件化抽离

这种方式不推荐，已经耦合在一起了，再这样执行

import React from 'react'
import ReactDOM from 'react-dom'

// 类组件
class Clock extends React.Component{
  // 状态 （数据） --> view  状态到视图层
  // 如果重新执行，状态层不会重新获取，视图层会重新渲染


  // 状态层 数据层
  constructor(props) {
    super(props)
      this.state = {
          time: new Date().toLocaleTimeString()
      }
  }
  // 视图层
  render() {
    this.state.time = new Date().toLocaleTimeString() // 这样会执行  react里面不允许直接设置state的值(只是警告，不影响执行, 可是最好使用setState)
    return (
      <div>
          <h1>当前时间：{ this.state.time }</h1>
      </div>
    )
  }
}

React.render(<Clock />, document.getElementById('root'))

setInterval(() => {
  ReactDOM.render(<Clock />, document.getElementById('root'))
}, 1000)

推荐的方式：

import React from 'react'
import ReactDOM from 'react-dom'

// 类组件
class Clock extends React.Component{
  // 状态 （数据） --> view  状态到视图层
  // 如果重新执行，状态层不会重新获取，视图层会重新渲染

  // 状态层 数据层
  // 构造函数初始化数据，将需要改变的初始化数据放到state中
  constructor(props) {
    super(props)
      this.state = {
          time: new Date().toLocaleTimeString()
      }
  }
  // 视图层
  render() {
    return (
      <div>
          <h1>当前时间：{ this.state.time }</h1>
      </div>
    )
  }

  // 生命周期函数  component 组件  DidMount 渲染完成时
  componentDidMount() {
    // setInterval(() => { this.state.time = new Date().toLocaleTimeString() }, 1000) // 错误写法 不推荐 不会更新state里面的值
    // 切勿直接修改state数据，直接state重新渲染内容，需要使用setState
    // 通过this.setState修改完数据后，并不会立即修改DOM里面的内容，react会在这个函数内容所有设置状态改变后,
    // 统一对比虚拟DOM对象，然后再统一修改，提升性能
    // 小程序也是借鉴react的state状态管理操作
    setInterval(() => { this.setState({ time: new Date().toLocaleTimeString() }) }, 1000)  // 正确写法
  }
}

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

demo：组件化 tab切换

import React from 'react'
import ReactDOM from 'react-dom'
import './Tab.css'

class Tab extends React.Component{
 constructor(props) {
   super(props)
     this.state = {
       c1: 'content active',
       c2: 'content'
     }
     this.clickEvent = this.clickEvent.bind(this)
 }

 // 点击事件
 clickEvent(e) {
   const index = e.target.dataset.index  // 获取data-index的值
   if(index == '1') {
     this.setState({
       c1: 'content',
       c2: 'content active'
     })
   } else {
     this.setState({
       c1: 'content active',
       c2: 'content'
     })
   }
 }

 render() {
   return (
     <div>
       <button data-index="1" onClick={ this.clickEvent }>内容一</button>
       <button data-index="2" onClick={ this.clickEvent }>内容二</button>
       <div className={ this.state.c1 }>
         <h1>内容1</h1>
       </div>
       <div className={ this.state.c2 }>
         <h1>内容2</h1>
       </div>
     </div>
   )
 }
}

ReactDOM.render(<Tab />, document.getElementById('root'))

最后

公众号：小何成长，佛系更文，都是自己曾经踩过的坑或者是学到的东西

有兴趣的小伙伴欢迎关注我哦，我是：何小玍。大家一起进步鸭