1 state

A state machine, used as a store of data, whose value is an object. To modify data in state, use the setState method

class Weather extends Component {
  state = {
    isHot: true,
  }
  clickFn = () = > {
    this.setState({ isHot:!this.state.isHot })
  }
  render() {
    return <div onClick={this.clickFn}>{this.state.ishot? 'Hot' : 'cool '}</div>
  }
}
ReactDOM.render(<Weather></Weather>.document.getElementById('root'))

Copy the code

Here isHot changes according to click, and is maintained in state. Click the corresponding method to modify the value of isHot. In particular, component-defined methods where this is undefined can be changed to bind this in constructor or point to an instance of weather using the arrow function

2 props

Props is used to read values passed to the component from outside the component. The property is read-only and cannot be modified. PropTypes are used to validate the property type without affecting the display and output in the console; DefaultProps adds the default value. If this value is not passed outside the component, the default value of defaultProps is displayed.

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: {age}</div> <div> Gender: {sex}</div> </div>)} static propTypes = {name: PropTypes.string.isRequired, age: PropTypes.number, sex: PropTypes.string, } static defaultProps = { name: '222', age: 13, sex: 'female', }} reactdom.render (<> <Student age={12} name="xiaoming" sex=" male "></Student> </>, document.getElementById('root') )Copy the code

In particular, when the component passes a value in double quotes, the type will also be string. If you want to change the value to another type, use {}, {} to indicate that js syntax is used inside.

3 refs

A way to get a DOM node, such as clicking a button to get the content of an input field

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

Enter 123 and click the button. The output of this is as follows:

The corresponding this.refs (set to the corresponding ref value, in this case inp) (this.refs.inp) can get the DOM node, which is deprecated in the latest version. Another method of creating a ref container is createRef, which can store nodes represented by the REF. This method is “dedicated”, i.e. each ref must create a new container, otherwise the latest container will overwrite the previous one.

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

This.myref. current (myref is the defined container name) can get this node.