1.state的基本使用
状态(state)即数据,是组件内部的私有数据,只能在组件内部使用
state的值是对象,表示一个组件中可以有多个数据
//1. 导入react import React from 'react'; import ReactDOM from 'react-dom'; /* state的基本使用 */ class App extends React.Component { /*constructor() { super() //初始化state this.state = { count: 0 } } */ // 简化语法初始化state state = { count: 0 } render () { return ( <div> <h1>计数器:</h1> </div> ) } } //渲染组件 ReactDOM.render(<App />, document.getElementById('root'))
获取状态:this.state
//1. 导入react import React from 'react'; import ReactDOM from 'react-dom'; /* state的基本使用 */ class App extends React.Component { /*constructor() { super() //初始化state this.state = { count: 0 } } */ // 简化语法初始化state state = { count: 10 } render () { return ( <div> <h1>计数器:{this.state.count}</h1> </div> ) } } //渲染组件 ReactDOM.render(<App />, document.getElementById('root'))
2. setState()修改状态
状态是可变的
语法:this.setState({要修改的数据})
注意:不要直接修改state中的值,这是错误的!!!
// 正确
this.setState({
count: this.state.count + 1
})
// 错误
this.state.count += 1
setState()作用:1.修改state 2.更新UI
思想:数据驱动视图
//1. 导入react import React from 'react'; import ReactDOM from 'react-dom'; /* state的基本使用 */ class App extends React.Component { state = { count: 0, test: 'a' } render () { return ( <div> <h1>计数器:{this.state.count}</h1> <button onClick={() => { this.setState({ count: this.state.count + 1 }) }}>+1</button> </div> ) } } //渲染组件 ReactDOM.render(<App />, document.getElementById('root'))
原文地址:https://www.cnblogs.com/wsl56/p/15523171.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。