react的组件数据挂载方式（props/state）

组件数据挂载方式

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 内部设置
   1. state 定义形式
      1. 直接在class 中定义
         class App extends React.Component {
         state = {}
         }
      2. 在constructor中定义
         class App extends React.Component {
         constructor () {
         super () // 继承父类this
         this.state = {}
         }
         }
   2. 用state来操控视图
   3. state的修改使用 setState

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

   1. setState 参数问题
      • setState可以有两个参数
        • 第一个参数可以是一个对象

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

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

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

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

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