组件数据挂载方式

组件数据挂载方式

react中将数据细分为两个类型

1. props 属性 举例： 一出生就具备特性
2. state 状态 举例： 可以改变的特性、属性

props

1. 外部传入

• 父组件通过 属性的形式 将 数据可以绑定在子组件身上 ， 子组件通过 this.props 获得
• 外部传入的props只能通过外部修改 （ 单项数据流 ）

2. 内部设置

• 内部通过 className.defaultProps 来设置
• 注意：defaultProps 是 react 16.x版本的， react 15.x版本用的是 getDefaultProps() { return { 属性：属性值} }
• 内部设置的属性叫做类属性（ 静态属性 ）
• 内部设置的方法叫做类方法 （ 静态方法 ）
• 类属性 和 类方法 统称为 类成员
• 类成员 通过 关键字 static 来定义

3. props的特殊使用方式

• children
• 使用：
  <Child> 内容 </Child>
this.props.children 就可以将组件的内容展示出来
• props验证
• vue中是提供了props验证形式的，但是React中并没有 ， 所以React中借助第三方包来进行验证
• 这个包叫做 prop-types

state

1. state是自身的 – state 内部设置
2. state 定义形式
3. 直接在class 中定义
   class App extends React.Component {
   state = {}
   }
4. 在constructor中定义
   class App extends React.Component {
   constructor () {
   super () // 继承父类this
   this.state = {}
   }
   }
5. 用state来操控视图
6. state的修改使用 setState

this.setState({
状态： 状态值
})

1. setState 参数问题

• setState可以有两个参数
• 第一个参数可以是一个对象

this.setState( {
状态: 新状态值
})

• 第一个参数可以是一个函数，这个函数我们给起了名称，叫做 updater

this.setState( ( preState, props) => {
return {
状态： 新状态值
}
})

• 第二个参数是一个回调函数，回调函数的目的是为了做异步

// this.setState( obj||fn,callback )
this.setState({
状态： 新状态值
}, () => {
//目的是为了异步
})