React 中 的三大属性还是挺重要的呢
那今天我们就来说一下 这 React 中的三大属性叭!
分别是 state refs props
No.1 : state
state 它的作用是 初始化指令
- constuctor(){
- super() // 这是必写的 super
- this.state = {
- stateName : value
- }
- }
读取的话就是使用
this.state.stateName
这就是给它 初始化值的方式
如果想修改 state 中的值, 在事件成员函数中如何修改 state 呢
- fn(){
- this.setState(){
- stateName : 'newname'
- })
不能采用 this.state. 属性 = 值 这种办法来修改的哦
接下来就是第二个 Props 啦
Props 是组件标签上的属性, 都纪律在自定义组件中一个 props 属性上
<Children name='loser' age='21'></Children>
这里在组件上写的属性为 name age 两个属性
那如何访问 props 呢
- <p>
- {this.props.age}
- </p>
- <p>
- {this.props.name}
- </p>
就这样 直接获取就可以获取到啦
注意 props 中的值不能改变 state 中值的可以改变
这里补充一点点 props 中的知识
propstType 和 defaultProps
propsType 是 验证 props 中的数据类型必须合法
defaultProps 是 设置 props 的初始值
这里简单说一下 defaultProps 的用法叭
这个是第一种用法; 也是经常使用的用法
- App.defaultProps = {
- name : 'handsome',
- age : 22
- }
这是第二种用法
- class App extends React.component{
- static defaultProps = {
- name : 'handsome'
- }
- }
那 props 就说完啦, 接下来是第三个 Refs
Refs 它就是通过操作虚拟 dom 来获取真实 dom
如何获取真实 dom
第一种就是 ref 后面是字符串
1. 给想要获取的元素身上加 ref 属性
<h3 ref='aa'>Hello World</h3>
aa 这个值就会在 refs 对象中 充当一个属性 属性值是 dom 元素
第二种 ref 后面是一个箭头函数
<h3 ref={(h3)={this.h3xx = h3}></h3>
h3xx 是一个临时存放 dom 元素的属性 , 在这个属性直接挂载在组件对象上
这就是 ref 用法
来源: http://www.bubuko.com/infodetail-3184685.html