react(三)组件内部状态state使用方式
2017-09-08 14:48
567 查看
在react中,驱动组件渲染过程的两种方式:prop和state。
state代表组件的内部状态,由于React组件不能修改传入的prop数据,所以需要记录自身的数据变化,就要使用state。
1、初始化state
通常在组件类的构造函数的最后,定义this.state,这个值 必须 是个对象。
2、读取state中某个属性值
方式一:对象获取属性值
方式二: es6的结构赋值
3、更新state
this.setState的作用:先更新this.state中的数据,再驱动组件的重新渲染。
注意: 更新state不能直接使用this.state,因为不能驱动组件渲染。
state代表组件的内部状态,由于React组件不能修改传入的prop数据,所以需要记录自身的数据变化,就要使用state。
1、初始化state
通常在组件类的构造函数的最后,定义this.state,这个值 必须 是个对象。
2、读取state中某个属性值
方式一:对象获取属性值
this.state.属性名
方式二: es6的结构赋值
{属性名}=this.state
3、更新state
this.setState的作用:先更新this.state中的数据,再驱动组件的重新渲染。
this.setState( {state属性名:新值} );
注意: 更新state不能直接使用this.state,因为不能驱动组件渲染。
相关文章推荐
- React第三方组件2(状态管理之Refast的使用②异步修改state)
- 深入理解React 组件状态(State)
- ReactNative的Navigator组件使用方式
- React-Native子组件修改父组件的几种方式,兄弟组件状态修改
- 小白使用React---子组件的状态变化更新到父组件中
- React第三方组件2(状态管理之Refast的使用④中间件middleware使用)
- React-Native - 使用AppState获取App运行状态(以及监听状态改变事件)
- react demo12 (获取组件属性状态this.state)
- React第三方组件3(状态管理之Flux的使用③TodoList中)
- React第三方组件4(状态管理之Reflux的使用①简单使用)
- React第三方组件4(状态管理之Reflux的使用③TodoList中)
- React.js 基础入门三 ---组件状态state
- React第三方组件3(状态管理之Flux的使用④TodoList下)
- React第三方组件2(状态管理之Refast的使用⑤LogicRender使用)
- ReactNative的Navigator组件使用方式
- React第三方组件3(状态管理之Flux的使用⑤异步操作)
- react demo13 (根据组件属性状态this.state实现表单实时监控)
- React第三方组件3(状态管理之Flux的使用①简单使用)
- react---react创建组件的三种方式以及区别:无状态组件、工厂模式、es6语法定义
- React技巧1(状态组件与无状态组件的使用)