[react exercise] life cycle callback function

Still, organize Silicon Valley video.

 

Function Description:
a "react is so difficult, what to do?" The words gradually become transparent, disappear completely and start again
b click the "dead" button to kill the whole component

 


Knowledge points:
0 React lifecycle process:
a first initialization display
b update state every time
c remove components

1 life cycle callback function - sometimes called life cycle hook
Callback function: the function defined by us but not called by ourselves, but finally executed
react is declarative programming: the process is set, just fill in the blanks. (jQuery belongs to command programming, each step needs to be written by yourself)
The life cycle callback function is always called, but if we don't rewrite it, we can't use it to achieve our function.
Common callback functions:
a componentDidMount: executes after render() executes. That is to say, let the component display on the page first, and then we can do what we want.
  b componentWillUNmount
   

How to write style attribute
style={{opacity}} two brackets, outer braces represent a js code,
The inner brace represents that opacity is a js object:
{opacity} is equivalent to {opacity: opacity}. The former represents the style name opacity (it can't be changed randomly), and the latter is the acquired variable
  
  
3 mount - Mount: mount the virtual dom in memory to the page

4 timer
One start is enough
  
Programming idea: what if two functions want to see the same thing?
Put it in an object that both sides can reach.
For example, the intervalId in this example is put in this.
Try not to use global variables for storage.

 

 

/*
Function Description:
a "react It's hard. What can I do? " The words gradually become transparent, disappear completely and start again
b Click the "dead" button to kill the whole component


Knowledge points:
0 React Life cycle process:
  a Initial display for the first time
  b Update state every time
  c Remove components

1 Life cycle callback function - sometimes called life cycle hook
  Callback function: the function defined by us but not called by ourselves, but finally executed
  react Declarative programming: the process has been set, just fill in the blank. (jQuery belongs to command programming, each step needs to be written by yourself)
  The life cycle callback function is always called, but if we don't rewrite it, we can't use it to achieve our function.
  Common callback functions:
  a componentDidMount:Execute after render() executes. That is to say, let the component display on the page first, and then we can do what we want.
  b componentWillUNmount
   

2 style How to write attributes
  style={{opacity}}There are two brackets. The outer brace represents a js code,
  The inner brace represents that opacity is a js object:
  {opacity}Equivalent to {opacity: opacity}, the former represents the style name opacity (can't be changed randomly), and the latter is the acquired variable
  
  
3 mount - Mount: mount the virtual dom in memory to the page

4 timer
  One startup is enough
  
5 Programming idea: what if two functions want to see the same thing?
  Put it in an object that both sides can reach.
  For example, the intervalId in this example is put in this.
  Try not to use global variables for storage.

*/


class Life extends React.Component{
  constructor(props){
    super(props)
  
    this.state = {
      opacity: 1
    }
    
    this.handleClick = this.handleClick.bind(this)
  }
  
  componentDidMount (){
    //Start cycle timer
    this.intervalId = setInterval(()=>{
      // this of setInterval is window
     //In addition to the arrow function, you can also use function(){}.bind(this). This is the component didmount's this
      // Question 2: js decimal addition and subtraction method has errors, so it cannot be written as follows: if(opacity === 0){
      let {opacity} = this.state
      opacity -= 0.1
      // if(opacity === 0){
      if(opacity<0){
        opacity = 1
        
      }
      this.setState({opacity})
    }, 200)
    
  }
  
  componentWillUNmount(){
    //Cleaning timer
    clearInterval(this.intervalId)
  }
  
  
  handleClick(event){
    //Destruction module
    ReactDOM.unmountComponentAtNode( document.getElementById('root'))
    //Stop Timer 
    //You can do this here, but you can also use the lifecycle function componentWillUNmount
    
  }
  
  render(){
    const {msg} = this.props
    const {opacity} = this.state
    return (
    <div>
      <h1 style={{opacity}}>{msg}</h1>
        <button onClick={this.handleClick}>Not alive.</button> 
    </div>
    )
  }
}


ReactDOM.render(
  <Life msg='react It's hard. What can I do??'/>,
  document.getElementById('root')
)




 

 

 

Published 35 original articles, won praise 7, visited 7578
Private letter follow

Tags: React Programming JQuery Attribute

Posted on Mon, 17 Feb 2020 03:53:05 -0500 by vladNz