React 基础 useState 基本使用

作用：为函数组件提供状态和修改状态的方法

使用：

1. 导入 useState 函数
2. 调用 useState 函数 并导入状态的初始值
3. 从 useState 函数的放回值中，拿到状态和修改状态的函数

mport React, { useState } from 'react'

const App = () => {
    const [count, setCount] = useState(0)
    return (
        <div style={{ textAlign: 'center' }}>
            <h3>计数器：{count}</h3>
            <div>
                <button onClick={() => setCount(count + 1)}>+1</button>
            </div>
        </div>
    )
}

export default App

useState 使用函数的写法

import React, { useState } from 'react'

export default function App() {
	// userState
	// 提供的状态 和 修改数据的方法
	console.log(1)
	// 使用函数形式 useState
	const [ count, setCount ] = useState(() => {
		let sum = 0
		for (let i = 0; i <= 10000; i++) {
			sum += i
		}
		// 只在页面渲染执行一次
		console.log(2)
		return sum
	})
	const handleClick = () => {
		setCount(count + 1)
	}
	return (
		<div>
			<h2>计数器：{count}</h2>
			<button onClick={handleClick}>点击加1</button>
		</div>
	)
}

useState（回调函数），回调函数的返回值就是状态的初始值，该回调函数只会触发一次

useState(() => {
    return 初始值
})