import { useState } from 'react'

function getDefaultValue () {
    for (let i = 0; i < 10000; i++) {
    }
    return '10'
}

function Counter (props) {
    const [count, setCount] = useState(() => {
        /**
         * 初始值经过一定的计算：
         * 只要无法直接确定，需要通过一定的操作才能获取，就可以理解为计算
         */
        // return props.count

        // 循环遍历一万条数据才能确定这里的初始值 
        return getDefaultValue()
    })
    return (
        <button onClick={() => setCount(count + 1)}>{count}</button>
    )
}

function App () {
    return (
        <div>
            <Counter count={10}/>
            <Counter count={20}/>
        </div>
    )
}

export default App