React三大属性（ref,state,props）

三大属性指代的是React中组件最重要的，也是最常用的三个主要属性：ref，props和 state

ref

Ref属性可以让开发者很方便快捷地拿到组件实例对象或DOM元素。

import React, { Component } from "react"

export default class ReactRef extends Component {
  constructor(props) {
    super(props)
    this.state = {
      inputValue: ""
    }
  }
  // 1.1 设置ref属性
  input = React.createRef()
  header = React.createRef()
  handleCheck = () => {
    // 1.3 获取ref属性中绑定的DOM元素对象
    console.log(this.input.current.value)
    console.log(this.header.current)
  }
  render() {
    return (
      <div>
        <h3>ref</h3>
        {/* 1.2 ref属性把节点进行绑定 */}
        <input type="text" value={this.inputValue} ref={this.input} />
        <header ref={this.header}></header>
        <button onClick={this.handleCheck}>检查</button>
      </div>
    )
  }
}

state

state（状态）就是每个组件中内部保存的私有数据，只能在组件内部声明和使用。state的值是对象，一个组件中可以有多个state数据。组件的state如果发生变化，那么React就会自动重新渲染用户界面(不需要操作DOM)，一句话就是，用户的界面会随着state状态的改变而自动发生改变，达到自动响应的目的。

import React, { Component } from 'react'

export default class ReactState extends Component {
  constructor(props) {
    super(props)
    this.state = {
      type: 'password',
      tip: '查看密码'
    }
  }
  changeType = () => {
    this.setState({
      type: this.state.type === 'password' ? 'text' : 'password',
      tip: this.state.tip === '查看密码' ? '隐藏密码' : '查看密码'
    })
  }
  render() {
    return (
      <div>
        <h3>state</h3>
        <input type={this.state.type} />
        <button onClick={this.changeType}>{this.state.tip}</button>
      </div>
    )
  }
}

props

React组件会因为实现业务或者功能的需求，会出现嵌套或者并列的情况，甚至有时候会因为多个组件负责的业务是相关联的，此时就需要在多个组件之间进行数据的传递了。React组件提供了Props属性， 专门用来实现组件接受外部参数的传递。props是只读的，所以只能获取外部传递的数据，但不能修改该数据。同时React还提供了props数据类型和必要性的约束（React15版本以后，需要单独安装yarn add prop-types）。同时，下面代码还实现了react父子组件之间传值

import React, { Component } from "react"
import Banner from "../components/Banner"

export default class ReactProps extends Component {
  state = {
    num: 0,
    childData: ''
  }
  msg = "hello world"
  handleChange = () => {
    this.setState({
      num: this.state.num + 1
    })
  }
  handleData = (data) => {
    console.log(data)
    this.setState({
      childData: data
    })
  }
  changeNum = (data) => {
    this.setState({
      num: data
    })
  }
  render() {
    return (
      <div>
        <h3>props</h3>
        <p>父组件数据：{this.state.num}</p>
        <button onClick={this.handleChange}>add</button>
        <Banner msg={this.msg} num={this.state.num} onReceiveData={this.handleData} changeNum={this.changeNum} />
        {this.state.childData && <p>子组件数据：{this.state.childData}</p>}
      </div>
    )
  }
}
// Banner.jsx
import React from 'react'
import PropTypes from 'prop-types'

export default function Banner(props) {
  return (
    <div>
      接收数据msg:{props.msg}, num:{props.num}
      <button onClick={() => props.changeNum(10)}>改变num</button>
      <button onClick={() => props.onReceiveData('hello')}>子传父</button>
    </div>
  )
}
Banner.PropTypes = {
  msg: PropTypes.string,
  num: PropTypes.number,
  changeNum: PropTypes.func,
  onReceiveData: PropTypes.func
}
Banner.defaultProps = {
  msg: '默认值',
  num: 0
}