Basic usage of useState
useState is used to add a state to a function component
It takes a parameter as the initial value of the state and returns an array
The first value of the array is the state, and the second value is the function that changes the state
import React, { useState } from 'react' function stateClass(){ const [name, setName] = useState('hong') return ( <div> <div>hello,{name}</div> <button onClick={() => {setName('nihao')}}>click</button> </div> ) } export default stateClass
Read status in the component: directly access the status name
Modify the state in the component: call the function and pass in the value after the state is changed
Basic usage of useEffect
useEffect is used to add signals that components have been mounted and to perform (and clean up) side effects
It can receive two parameters: callback function and array
1. Receive only the first parameter:
When componentDidMount is, the callback function is executed
When the state declared by useState is updated (the view is re rendered), the callback function is also executed
2. Receive two parameters: "effect depends on some state s"
The state name defined by useState is written in the array
The callback function is executed only when the status in the array is updated
If we want the callback function to execute only once during componentDidMount, we can write an empty array (called "skip effect")
3. Return value of callback function
The callback function of useEffect allows a function to be returned to clean up side effects
By default (useEffect does not write the second parameter), the returned function will only be executed when the component is unloaded
If useEffect is executed multiple times, the previous effect will be cleaned up before calling a new effect
Example: we want to subscribe to this props. friend. Change of ID:
useEffect(() => { // ... ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); return () => { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); };
The possible action sequences are as follows:
// Mount with { friend: { id: 100 } } props ChatAPI.subscribeToFriendStatus(100, handleStatusChange); // Run the first effect // Update with { friend: { id: 200 } } props ChatAPI.unsubscribeFromFriendStatus(100, handleStatusChange); // Clear previous effect ChatAPI.subscribeToFriendStatus(200, handleStatusChange); // Run the next effect // Update with { friend: { id: 300 } } props ChatAPI.unsubscribeFromFriendStatus(200, handleStatusChange); // Clear previous effect ChatAPI.subscribeToFriendStatus(300, handleStatusChange); // Run the next effect // Unmount ChatAPI.unsubscribeFromFriendStatus(300, handleStatusChange); // Clear last effect
requirement analysis
- Display the countdown time dynamically and in real time
- After the countdown, automatically jump to another page
code implementation
First, we need a counter status to indicate the countdown time
There is also a timer ID state, which is used to save the ID of the timer
Secondly, when the page is mounted, you need to create a timer and execute the count-1 operation after 1s
Then clean up the previous timer, create the timer again, and execute count-1 after 1s
We can use the useEffect feature to realize this function:
const [timerID, setTimerID] = useState(null); const [counter, setCounter] = useState(5); useEffect(() => { if(counter > 0){ let timer = setTimeout(() => { setCounter(counter-1) }, 1000); setTimerID(timer) }else{ props.history.push('/order') } return () => { setTimerID(null) } },[counter]);
When the page is mounted: counter = 5, execute the callback function and save the timer ID
After 1s, execute the timer, count = 4
useEffect finds that the count is updated. First clean up the side effects (setTimerID(null)), and then create a new timer
After 1s, execute the timer, count = 3
... In this cycle until count = 0, use react router to jump the page
The complete code is as follows:
import React, {useState,useEffect} from 'react' function Reminder(props) { const [timerID, setTimerID] = useState(null); const [counter, setCounter] = useState(5); useEffect(() => { if(counter > 0){ let timer = setTimeout(() => { setCounter(counter-1) }, 1000); setTimerID(timer) }else{ props.history.push('/order') } return () => { setTimerID(null) } },[counter]); return ( <div> <p>{counter}After seconds, it will automatically jump to the order page...</p> </div> ); } export default Reminder