react entry (C): state, ref & Simple Explanation dom

First, the state

In their own definition of internal components

Effect: when re-update state of the internal components, internal components may be re-render the control (without re-retrieval assembly may be re-render)

 

import React from 'react';
class Clock extends React.Component{
　　constructor(){
　　super();
　　this.state = {
　　　　time: new Date().toLocaleString(),
　　　　a: 0
　　}
}
componentDidMount() {
/**
* Two ways to modify the status of
1. state * properties by modifying this.setState
* 2. to force rendered by this.forceUpdate
* / 
The setInterval (() => {
　　// this manner, not only the modified state, but also to re-render component. This.setState ({
　　
　　 　　time: new Date().toLocaleString()
　　 })

　　// this way can modify the state, but can not re-rendering components. If you are rendering, you need this.forceUpdate () to force rendering. this.state.time = new Date () toLocaleString ( ).;
　　
　　this.forceUpdate();
　}, 1000)
}


render() {
　　return (
　　　　<div>
　　　　　　<h2>{this.state.time}</h2>
　　　　　　<Button the onClick = {Event => {
　　　　　　　　// Here setState modified component is asynchronous programming state: after executing setState, and will modify the state notification component rendering operations into the EventQueue (wait event queue), when the latter the main stack to complete the task will be performed this operation. 
　　　　　　　　// But not all setState asynchronous operation. 
　　　　　　　　the this .setState ({
　　　　　　　　num: this.state.num+1
　　　　　　});
　　　　　console.log ( the this .state.num); // first print is 0
　　　　　}}> Point I </ button>
　　　　</div>
　　)
　}
}
export default Clock;

 

 二、ref & dom

class Clock extends React.Component{
　　constructor(){
　　　　super();
　　　　this.state = {
　　　　　　time: new Date().toLocaleString(),
　　　　a: 0
　　}
　　the this .time React.createRef = (); // third function by creating a 
}
componentDidMount() {
　　setInterval(()=>{
　　/**
　　* If we set the ref attribute to the element (attribute values ​​are unique)
　　* Ref = "xxx", react when parsing jsx, the manner element will set this property on the object key to the object increases to the current instance refs {xxx: element}
　　* After jsx rendered, want to operate this element, based directly on this.refs.xxx can get to, this is the dom react in operation.
　　*/
　　this.refs.time.innerHTML = new Date().toLocaleString();　　//console.log(this.refs) {time: h2}

　　this.time.innerHTML = new Date().toLocaleString();　　// console.log(this.time) {time: h2}

　　}, 1000)
}

render() {
　　// first (direct attributes defined) 
　　return <REF = {H2 'Time'}> { the this .state.time} </ H2>

　　// second (function defined by an arrow) 
　　// value ref string in addition, may also be a function. If it is a function of the parameter x is represented by the current element itself, but we generally will mount directly on the current element instance, 
　　// directly after this.xxx can manipulate the elements (for example: where x is h2) 
　　return (
　　　　 <div>
　　　　　　<h2 ref={x => {this.time = x}}>{this.state.time}</h2>
　　　　</div>
)

　　// third (() method is defined by React.createRef) 
　　<REF = {H2 the this .time}> { the this .state.time} </ H2>
　}
}

 

Here are a few key use cases for the refs:

- treatment focus, text selection, or media control.
- trigger mandatory animation.
- integrate third-party libraries DOM

For example: Focus Processing

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // Create a ref storage textInput DOM elements in 
    the this .textInput = React.createRef ();
     the this .focusTextInput = the this .focusTextInput.bind ( the this );
  }

  text input focus () {
    // directly native API to make the text input box is obtained focus 
    // NOTE: The "current" DOM node acquired 
    the this .textInput.current.focus ();
  }

  render() {
    // tell React We want the `textInput` <input> ref linked to the constructor created in 
    return (
       <div>
        <input type="text" ref={this.textInput} />
          
        <input type="button" value="Focus the text input" onClick={this.focusTextInput}/>
      </div>
    );
  }
}