react 中 state 的基本使用

有状态组件和无状态组件

函数组件又叫做 无状态组件，类组件又叫做 有状态组件
状态( state )即 数据
函数组件没有自己的状态，只负责数据展示(静)
类组件有自己的状态，负责更新Ul，让页面“动”起来

比如计数器案例中，点击按钮让数值加1。0和1就是不同时刻的状态，而由0变为1就表示状态发生了变化。状态变化后，UI也要相应的更新。React中想要实现该功能，就要使用有状态组件来完成。

state的基本使用

状态( state )即数据，是组件内部的私有数据，只能在组件内部使用
state的值是对象，表示一个组件中可以有多个数据
通过 this.state 来获取状态

class App extends React.Component {// constructor() {//     super()//     // 初始化state//     this.state = {//         count: 0//     }// }// 简化语法初始化state  【推荐】state = {count: 0,}render() {return(<div><h1>计数器：{this.state.count}</h1></div>)}
}// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"))

setState修改状态

状态是可变的
语法：this.setState({ 要修改的数据 })
注意：不要直接修改 state 中的值，这是错误的！！！
setState() 作用：1. 修改state 2. 更新UI
思想：数据驱动视图

class App extends React.Component {// 简化语法初始化state  【推荐】state = {count: 0,}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"))

从JSX中抽离事件处理程序

JSX中掺杂过多JS逻辑代码，会显得非常混乱
推荐：将逻辑抽离到单独的方法中，保证JSX结构清晰
原因：事件处理程序中 this的值为undefined
希望： this 指向组件实例( render方法中的this即为组件实例)

事件绑定this指向

1. 箭头函数

利用箭头函数自身不绑定 this 的特点
render() 方法中的 this 为组件实例，可以获取到 setState()

2. Function.prototype.bind()
利用 ES5 中的 bind() 方法，将事件处理程序中的 this 与组件实例绑定到一起

class App extends React.Component {constructor() {super()this.state = {count: 0,}this.onIncrement = this.onIncrement.bind(this)}// 事件处理程序onIncrement() {console.log('事件处理程序中的this：', this)this.setState({count: this.state.count + 1})}render() {return(<div><h1>计数器：{this.state.count}</h1><button onClick = { this.onIncrement }>+1</button></div>)}
}// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"))

3. class的实例方法

利用 箭头函数 形式的 class实例 方法
注意∶该语法是实验性语法，但是，由于 babel 的存在可以直接使用

class App extends React.Component {state = {count: 0,}// 事件处理程序onIncrement = ()=> {console.log('事件处理程序中的this：', this)this.setState({count: this.state.count + 1})}render() {return(<div><h1>计数器：{this.state.count}</h1><button onClick = { this.onIncrement }>+1</button></div>)}
}// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"))

react 中 state 的基本使用相关推荐

React中state和props遇到的问题和个人总结
在学习和使用react构建项目的时候,一定会使用到组件的概念,为了某个模块的多次使用,通常会进行组件的复用,这时候就会涉及到组件之间的值的传递,在React中state是无法传递的,组件之间的通信通过 ...
React中pros和state的区别
props是一个父组件传递给子组件的数据流,这个数据流可以一直传递到子孙组件. state代表的是一个组件内部自身的状态(可以是父组件.子孙组件). state 和 props 主要的区别在于 pro ...
React中三元运算符的坑
在React中state的定义中有一个坑不易被发现,主要是state属性未被定义就是使用,需要用到三位运算符: 举个栗子: class App extends Component{this.state ...
彻底理解react中的props
每天对自己多问几个为什么,总是有着想象不到的收获. 一个菜鸟小白的成长之路(copyer) 在react中 state 和 props是两个非常重要的属性,并且常用的属性.简单来说:都是用来保存数据 ...
React中props与state的区别
首先,props与state是React组件的两种方法. props,可以在组件中来获取this.props的属性. var Helloreact=React.createClass({render: ...
[react] react中的setState是同步还是异步的呢？为什么state并不一定会同步更新？
[react] react中的setState是同步还是异步的呢?为什么state并不一定会同步更新? 由React控制的事件处理程序,以及生命周期函数调用setState不会同步更新state . ...
[react] 在React中组件的state和setState有什么区别？
[react] 在React中组件的state和setState有什么区别? state:初始化状态 setState:对状态进行更新个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
[react] React中如何监听state的变化？
[react] React中如何监听state的变化? 16.x 之前使用componentWillReveiveProps componentWillReceiveProps (nextProps) ...
react中的state、props、ref
state state顾名思义就是状态,它只是用来控制这个组件本身自己的状态,我们可以用state来完成对行为的控制.数据的更新.界面的渲染,由于组件不能修改传入的props,所以需要记录自身的数据变 ...

react 中 state 的基本使用

有状态组件和无状态组件

state的基本使用

setState修改状态

从JSX中抽离事件处理程序

事件绑定this指向

react 中 state 的基本使用相关推荐

最新文章

热门文章