This is the 20th day of my participation in the August More Text Challenge

Example: Click the button and the text changes from 0 to 1, and then from 1 to 0 again

Click the button to make the component disappear

  • Add click events to buttons
  • Unmount Component API: unmountComponentAtNode
class Life extends React.Component{
    // Mount: mount
    // Unmount: unmount
    leave = () = >{
        / / unloading
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))}render(){
        return(
            <div>
                <h1>What if you can't React?</h1>
                <button onClick={this.leave}>Don't live</button>
            </div>)}}Copy the code

Change the transparency of the text

  • Who drives page updates? Data in state. So add the transparency variable to state.
  • How to make the opacity of the opacity driver page in this state? Add styles to text
 state = {
        opacity:1
    }
    // Mount: mount
    // Unmount: unmount
    leave = () = >{
        / / unloading
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))}render(){
        return(
            <div>
                <h1 style={{opacity:this.state.opacity}}>What if you can't React?</h1>
                <button onClick={this.leave}>Don't live</button>
            </div>)}}Copy the code

It takes 2s to go from completely visible to completely gone

  • Start a cycle timer and decrease by 0.1 each time. The cycle timer decreases by 0.1 every 200ms.

We will write the timing function to the class found error, note that class is not free to write code. Class can write: constructor, custom function, assignment statement, static declaration assignment statement.So the timing method can’t be written here. Can we put it in leave? The components have been uninstalled. It doesn’t seem appropriate. We’ll just have to write it in the Render method. Is it appropriate to write under return? The following code does not execute, and it does not seem appropriate. So it must be written at the top of the return in the Render method.

  • Modify the state value in the timer when opacity<=0, and then change opacity to 1
render(){
        setInterval(() = > {
            // Get the original state
            let {opacity} = this.state
            // -0.1
            opacity -= 0.1
            // Change the value to 1 when less than or equal to 0. No else condition to omit {}
            if(opacity <= 0) opacity = 1
            // Set new transparency
            this.setState({opacity})
        }, 200);
        return(
            <div>
                <h1 style={{opacity:this.state.opacity}}>What if you can't React?</h1>
                <button onClick={this.leave}>Don't live</button>
            </div>)}Copy the code

Infinite recursion

But now the page refresh is a bit abnormal. It causes an infinite recurrence.

Reason: The timer in Render executes every 200ms, changing state each time, which triggers render to render the page.

Let’s print “render” in render. The number of prints is found to be exponentially increasing 📈.

So the timer doesn’t fit right here.

componentDidMount

Why doesn’t componentDidMount be written as an assignment plus a pointed function? Because componentDidMount is in the same class as Render, React created an instance of the class. Its this pointer is never lost.

componentDidMount(){}Copy the code

When is componentDidMount called? Called after the component mounts the page

So now we’re going to write the timer into componentDidMount.

 // called after the component mounts the page
    componentDidMount(){
        setInterval(() = > {
            // Get the original state
            let {opacity} = this.state
            // -0.1
            opacity -= 0.1
            // Change the value to 1 when less than or equal to 0
            if(opacity <= 0) opacity = 1
            // Set new transparency
            this.setState({opacity})
        }, 200);
    }
Copy the code

Now, we have the result we want. The component has been uninstalled and cannot update its status.Cause: The component has been uninstalled and the timer is still running. So we need to stop the timer.

Stop timer

So when is a good time to empty the timer? When you click the button.

Using the clearInterval() method, you need the timer ID to clear the timer.

Mount setInterval to the instance itself this.timer = setInterval.

  leave = () = >{
        // Clear the timer
        clearInterval(this.timer)
        / / unloading
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))}// called after the component mounts the page
    componentDidMount(){
        this.timer = setInterval(() = > {
            // Get the original state
            let {opacity} = this.state
            // -0.1
            opacity -= 0.1
            // Change the value to 1 when less than or equal to 0
            if(opacity <= 0) opacity = 1
            // Set new transparency
            this.setState({opacity})
        }, 200);
    }
Copy the code

componentWillUnmount

Called when a component is about to be uninstalled. It’s okay to add the timer here.

Life cycle callback functions like componentWillUnmount and componentDidMount === life cycle hook function === = life cycle hook