2022 is coming, the front end development is very rapid, now the front end is no longer writing simple pages, with the Web big front end, engineering is becoming more and more hot, there are also many frameworks. Many companies are not only using a single framework, as the front end development of the two most popular frameworks in the country, are necessary to master. Therefore, I decided to learn React at the end of this year when the epidemic was raging, so as to gain more competitiveness in my future job search.

Learning stage, if there is something wrong, welcome to leave a message in the comment area, I timely correction

This article has been serialized, other chapters portal ⬇️

Chapter 1 – Understanding JSX syntax

Chapter 2 – Function components and Class components

Chapter 3 — Props and State

Chapter 4 – Event Handling

Chapter 6 – Life Cycle

Chapter 7 – Communicating Context across Components

Chapter 8 -React Hooks

Ref and Refs

Refs provides a way to access DOM nodes or React elements created in the Render method. The ref in React is similar to the ref in vUE, and can be retrieved by binding the component or DOM ref to the component

Note: string ref is deprecated

There are three ways to create a REF: string form ref(deprecated), callback form ref, and createRef

Ref as a string

export default class Demo extends Component {
	componentDidMount(){
    console.log(this.refs.Index)
  }
  render() {
    return (
      <div>
        <Index ref="Index"></Index>
      </div>)}}class Index extends Component {
  render() {
    return (
      <div>
        <button>The Index button</button>
      </div>)}}Copy the code

We can bind the component to the ref property incomponentDidMountPass through the hook functionThis.refs. bind ref nameAccess the component instance and print results are visible, but this method is deprecated,websiteThere are also some problems with this approach

Ref in callback form

export default class Demo extends Component {
  constructor(props){
    super(props)
    this.indexDOM = null
  }
  getIndexRef = (element) = > {
		console.log(element, 'The getIndexRef function executes')
    this.indexDOM = element
  }
  render() {
    return (
      <div>
        <Index ref={this.getIndexRef}></Index>
      </div>)}}class Index extends Component {
  render() {
    return (
      <div>
        <button>The Index button</button>
      </div>)}}Copy the code

Borrow the picture above, also can print normally to get the component. However, if the ref callback is inline, it will be executed twice during the update process, passing null first and dom node second. This is because a new function instance is created on each render, so React clears the old ref and sets the new one. This problem can be avoided by defining the ref callback as a class binding function

Let’s modify the code:

export default class Demo extends Component {
  constructor(props){
    super(props)
    this.indexDOM = null
    this.state = {
      count: 0
    }
  }
  getIndexRef = (element) = > {
    console.log(element, 'The getIndexRef function executes')
    this.indexDOM = element
  }
  handleClick = () = > {
    this.setState({
      count: this.state.count + 1})}render() {
    return (
      <div>
        <Index ref={e= > this.getIndexRef(e)} changeCount={this.handleClick} count={this.state.count}></Index>
      </div>)}}class Index extends Component {
  
  render() {
    return (
      <div>
        <h1>Current count: {this.props. Count}</h1>
        <button onClick={this.props.changeCount}>The Index button</button>
      </div>)}}Copy the code

The first time it prints, when I hit the button to trigger the component update, I can see that ref’s inline callback executes twice and gets NULL the first time

createRef

You can also access component nodes by creating and binding refs using React. CreateRef

export default class Demo extends Component {
  constructor(props){
    super(props)
    this.myIndex = React.createRef()
  }
  componentDidMount() {
    console.log(this.myIndex.current)
  }
  render() {
    return (
      <div>
        <Index ref={this.myIndex}></Index>
      </div>)}}class Index extends Component {
  render() {
    return (
      <div>
        <button>The Index button</button>
      </div>)}}Copy the code