类组件“实例”中三大属性

一、state

1、state是什么？

状态管理器

2、state中如何定义数据？

state写在构造器里面可以(br) state还可以写在外面

constructor(props) {
  super(props)
  this.state = {
    ishot: false
  }
}
state = {ishot: false}

3、如何更改state中的值?

状态不能直接更改

    //使用setState
    //如果我们直接更改那我们更改的数据不会触发页面更改
    this.setState({ishot:!ishot})
    //注意，更新数据并不是替换原来的数据，而是合并原来的数据
    //
    //当我们更改这个数据的时候组件构造器（constructor）触发了几次？--------1次
    //这个时候render调用了几次------n+1次
    //
    // 当我们使用setState会触发一次render更新

二、props

1、props的使用

参考组件传参
{...obj},这样可以展开一个对象，react中可以使用这个方法来向子组件传递多个属性

import propTypes from 'prop-types'
import {component},react from 'react

// 接收父组件传递的数据
Person.propTypes = {
  name: PropTypes.string.isRequired,  // 是字符串类型，并且是比传参数
  sex: PropsType.string,
  speak: PropsTypes.func  // 传递的是一个方法，不能写function会与内置的关键字产生冲突
}
// 给非必传参数添加一个默认值
Person.defaultProps = {
  sex: '人妖'
} 
export class Person extend component {
  state={}
  // 写在内部的写法
  static propTypes = {
    name: PropTypes.string.isRequired,  // 是字符串类型，并且是比传参数
    sex: PropsType.string,
    speak: PropsTypes.func  // 传递的是一个方法，不能写function会与内置的关键字产生冲突
  }
  static defaultProps = {
    sex: '人妖'
  } 
  // rander方法
  render() {
    return (
      <div></div>
    )
  }
}
// props是一个只读的参数

三、refs

refs是什么？

给一个元素起个别名（标识），让我们能够直接拿到该元素

使用

字符形式的ref（官方可能会废弃，不建议使用）

存在一些效率上面的问题，会拖慢系统速度

// 给元素添加属性ref
ref = 'a'
// 我们怎么拿到该元素
this.refs.a

使用回调函数形式的ref

import {component},react from 'react

export class Person extend component {
    
    state={}
    // rander方法
    render() {
      return (
        <div ref={(currentNode)=>{this.div1=a}}>你好</div>
      )
    }
  }

回调形式的ref存在的问题：

1、回调函数调用次数的问题
第一次调用：页面初始化的时候会调用一次
在组件更新的时候会被调用两次：
①：第一次调用回调函数会传递一个null的参数
②：第二次调用回调函数会传递当前的节点

解决这个问题（将这个写成class函数的形式）

把这个函数提出来写在类里面
注：这个问题解不解决都是无关紧要的

createRef()

注：createRef() 定义的节点不能重名

import {component},react from 'react

export class Person extend component {
    state={}
    div1 = react.createRef()
    // rander方法
    render() {
      return (
        <div ref={this.div1}>你好</div>
      )
    }
  }

构造器

import propTypes from 'prop-types'
import {component},react from 'react
  
  export class Person extend component {
    constructor(props) {
      // 构造器是否接受props，是否传递给super，
      // 取决于：是否要在构造器中通过实例访问prop（this.props）
      super(props)
      console.log('constructor', this.props)
    }
    state={}
    // 写在内部的写法
    static propTypes = {
      name: PropTypes.string.isRequired,  // 是字符串类型，并且是比传参数
      sex: PropsType.string,
      speak: PropsTypes.func  // 传递的是一个方法，不能写function会与内置的关键字产生冲突
    }
    static defaultProps = {
      sex: '人妖'
    } 
    // rander方法
    render() {
      return (
        <div></div>
      )
    }
  }
  // props是一个只读的参数

react类组件实例的三大属性（state,props,）