React学习——组件三大属性

1.state

1. state是组件对象最重要的属性, 值是对象(可以包含多个数据)
2. 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

案例：

---

需求：自定义组件，功能如下： 1.显示h2标题，初始文本为：你喜欢我 2.点击标题更新为：我喜欢你

---

 编码操作

 1.初始化状态

  constructor (props) {

    super(props)

    this.state = {

      stateProp1 : value1,

      stateProp2 : value2

    }

  }

2.读取某个状态值

  this.state.statePropertyName

3.更新状态---->组件界面更新

  this.setState({

    stateProp1 : value1,

    stateProp2 : value2

  }) 

知识点：

1.onClick：onclick 事件会在元素被点击时发生，当按钮被点击时执行Javascript代码，用在事件监听上

{isLikeMe?'你喜欢我':'我喜欢你'}

 2.bind方法

this.handleClick.bind(this)的返回值是一个新的函数，其实是将this.handleClick拷贝了一份，他们两个已经没有了任何关系，已经不在同一个内存地址中了，isLikeMe返回了True。 

2.props

 

---

需求: 自定义用来显示一个人员信息的组件
  1). 姓名必须指定
  2). 如果性别没有指定, 默认为男
  3). 如果年龄没有指定, 默认为18

---

 

  理解：

1.  每个组件对象都会有props(properties的简写)属性
2. 组件标签的所有属性都保存在props中 

作用：

1. 通过标签属性从组件外向组件内传递变化的数据
2. 注意: 组件内部不要修改props数据

 

 编码操作

1.内部读取某个属性值

this.props.propertyName

2.对props中的属性值进行类型限制和必要性限制

Person.propTypes = {

name: React.PropTypes.string.isRequired,

age: React.PropTypes.number.isRequired

}

3.扩展属性: 将对象的所有属性通过props传递

4.默认属性值

Person.defaultProps = {

name: 'Mary'

}

5.组件类的构造函数

constructor (props) {

super(props)

console.log(props) // 查看所有属性

} 

3.refs-event

---

 需求: 自定义组件, 功能说明如下:   1. 点击按钮, 提示第一个输入框中的值   2. 当第2个输入框失去焦点时, 提示这个输入框中的值

---