React Hooks之useState

一、为什么使用useState

以前只有类组件才能使用state, 函数组件只能展示静态的数据，它没有自己的状态，而useState的出现让函数组件也能使用state

二、useState的基本使用

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Count() {
    // conut是一个状态  状态的修改通过setCount方法修改， useState(0)的参数0就是初始化count状态的值
    let [count, setCount] = useState(0)
    return (
        <div>
            <p>{ count }</p>
            <button onClick={() => setCount(count + 1)}> 加1 </div>
        </div>
    );
}

function render() {
    ReactDOM.render(<Counter/>, document.getElementById("root"));
}
// 调用函数渲染<Counter/>组件
render()

1. 接受一个参数作为初始化值
2. 返回一个数组，数组的第一个值为最新的状态 count，第二个值为一个函数用于修改状态 setCount
3. setCount 设置后需要触发重新渲染

如果对你有帮助点赞一下