组件三大核心属性

1 state

状态机，用作数据的存储，值是一个对象。 修改state里的数据则用setState方法

class Weather extends Component {
  state = {
    isHot: true,
  }
  clickFn = () => {
    this.setState({ isHot: !this.state.isHot })
  }
  render() {
    return <div onClick={this.clickFn}>广州今天天气很{this.state.isHot ? '炎热' : '凉爽'}</div>
  }
}
ReactDOM.render(<Weather></Weather>, document.getElementById('root'))

这里的isHot根据点击而变化，放在state中维护，点击对应的方法里修isHot的值。
特别的，组件自定义的方法中this为undefined，可通过改变在constructor里用bind绑定this,或者用箭头函数指向weather的实例

2 props

props用来读取组件外部传递给组件的值，属性为只读，不可修改。
propTypes用来验证属性类型，不影响显示，输出在控制台中；
defaultProps 补充默认显示值，当组件外部没有传递该值时，默认显示defaultProps里面的值，获取this.props的值是已经合并后的取值。

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ReactDOM from 'react-dom'

class Student extends Component {
  render() {
    const { name, age, sex } = this.props
    console.log(this.props)
    return (
      <div>
        <div>姓名：{name}</div>
        <div>年龄：{age}</div>
        <div>性别：{sex}</div>
      </div>
    )
  }
  static propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
    sex: PropTypes.string,
  }
  static defaultProps = {
    name: '222',
    age: 13,
    sex: '女',
  }
}
ReactDOM.render(
  <>
    <Student age={12} name="xiaoming" sex="男"></Student>
    <Student name="defu" sex="男"></Student>
  </>,
  document.getElementById('root')
)

特别的，在组件外部传值用双引号时此时的类型也会是string，如果要改为其他类型，用{}，{}在此表示里面用js语法。

3 refs

一种获取dom节点的方法，比如点击按钮获取输入框的相关内容

class MyRefs extends Component {
  render() {
    return (
      <div>
        <input ref="inp"></input>
        <button
          onClick={() => {
            console.log(this)
          }}
        >
          按钮
        </button>
      </div>
    )
  }
}
ReactDOM.render(<MyRefs></MyRefs>, document.getElementById('root'))

输入123，点击按钮此时的this输出如下：

对应的this.refs（设置的对应ref值，这里是inp）(即this.refs.inp)可以获取dom节点，该功能在最新版本已经废弃。 还有一种创建ref容器的方法createRef,可以存储被ref所表识的节点，特点是‘专人专用’，即一个ref就要创建一个新的容器，否则最新的容器会覆盖掉之前的。

class MyRefs extends Component {
  showData = () => {
    console.log(this)
  }
  myref = React.createRef()
  render() {
    return (
      <div>
        <input ref={this.myref}></input>
        <button onClick={this.showData}>按钮</button>
      </div>
    )
  }
}
ReactDOM.render(<MyRefs></MyRefs>, document.getElementById('root'))

如下： this.myref.current（myref为定义的容器名称）可以获取该节点。