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')
