网站建设学院,网站建设综合实训总结,兰州市住房建设局网站,融水做的比较好的网站有哪些一个前提#xff1a;在react hook出来之前#xff0c;函数式组件是没有自己的状态的#xff0c;所以我们统一通过类组件来讲解
1. 初始化状态
• 通过class的实例属性state来初始化 • state的值是一个对象结构#xff0c;表示一个组件可以有多个数据状态
React.Compone…一个前提在react hook出来之前函数式组件是没有自己的状态的所以我们统一通过类组件来讲解
1. 初始化状态
• 通过class的实例属性state来初始化 • state的值是一个对象结构表示一个组件可以有多个数据状态
React.Component{// 初始化状态state {count: 0}render() {return Button计数器/Button}
}2. 读取状态
• 通过this.state来获取状态 classCounterextendsReact.Component{ // 初始化状态state {count: 0}render() {// 读取状态return Button计数器{this.state.count}/Button}
}3. 修改状态
• 语法 this.setState({ 要修改的部分数据 }) • setState方法作用 • 修改state中的数据状态 • 更新UI • 数据驱动视图也就是只要修改数据状态那么页面就会自动刷新无需手动操作dom • 不要直接修改state中的值必须通过setState方法进行修改
React.Component{// 定义数据state {count: 0,abled: false,}// 定义修改数据的方法setCount () {this.setState({count: this.state.count 1})}// 使用数据 并绑定事件render () {returnButton onClick{this.setCount} disabled{this.state.abled}{this.state.count}/Button}
}
