Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to implement the countdown component in React. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Countdown component-requirements description:

Write a functional component CountDown and set a property that passes in the maximum value, minus one per second until it is 0.

problem

How to design.

Import {useState} from "react" function CountDown ({max = 10}) {const [count,setCount] = useState (max) useEffect (() = > {if (count > 0) {setTimeout (() = > {setCount (count-1)}, 1000)}) return {count}} export default CountDown

What if I reset the count after the parent changes the prop?

Let's use another useEffect to deal with it:

Import {useState} from "react" function CountDown ({max = 10}) {const [count,setCount] = useState (max) / / countdown logic useEffect () = > {if (count > 0) {setTimeout (() = > {setCount (count-1)}, 1000)}) / / reset count useEffect () = > {setCount (max)}, [max]) return {count}} export default CountDown

SetTimeout may cause memory leaks. How do we deal with it?

It is handled by the return function of useEffect.

Import {useState} from "react" function CountDown ({max = 10}) {const [count,setCount] = useState (max) / / countdown logic useEffect (() = > {let timer = null If (count > 0) {timer = setTimeout (() = > {setCount (count-1)}, 1000)} return () = > {clearTimeout (timer)}}) / / reset count useEffect (() = > {setCount (max)}, [max]) return {count}} export default CountDown on "how React implements countdown components" ends here Hope that the above content can be helpful to you, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.