❤React-函数组件useState

这里我们主要对于useState进行了解，再写一些例子

1、useState认识 (函数组件hooks)

useState用于在函数组件中管理和更新状态，它允许我们在没有类组件的情况下，依然能在函数组件中拥有状态管理的能力

Basic usage

useState函数接受初始状态作为参数，并返回一个数组

比如下面：数组的第一个元素是当前的状态值state，第二个元素是一个函数setState，用于更新这个状态。

const [state, setState] = useState(initialState);

（1）新建组件

根目录下面新建demo文件夹=>下面新建01-userState.js文件

userState.js 文件夹里面写一个简单的函数，然后进行导出，在这里我们采用的都是ES6的语法：

function Counter() {
    return (
        <div>
          我是count
        </div>
    );
}
export default Counter;

（2）引入

接下来我们在App.js之中进行引入

import Counter from './demo/01-userState.js'
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Counter></Counter>
      </header>
    </div>
  );
}
export default App;

运行项目，我们的组件已经正确的显示到了网页上。

（3）useState编写计数器

function Counter() {
    // 使用 useState 创建一个名为 count 的状态变量，初始值为 0
    // setCount 是用来更新 count 状态的函数
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>Count: {count}</p>
            {/* 点击按钮时调用 setCount 来更新 count 状态 */}
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

点击按钮，计数器可以正常使用

（4）useState编写输入框

function Counter() {
    const [text, setText] = useState('hello');
    function handleChange(e) {
        setText(e.target.value);
    }
    // 使用 useState 创建一个名为 count 的状态变量，初始值为 0
    // setCount 是用来更新 count 状态的函数
    const [count, setCount] = useState(0);
    return (
        <>
            <input value={text} onChange={handleChange} />
            <p>You typed: {text}</p>
            <button onClick={() => setText('hello')}>
                Reset
            </button>
        </>
    );
}

（5）useState编写选择框

思路分析：同理也是跟我们写input文本框差不多，写一个input。类型为checkbox，然后利用 useState编写一个初始状态，最后利用onChange实践改变input的值，重新渲染useState的值

 // 复选框
    const [liked, setLiked] = useState(true);
    function handleChange(e) {
        setLiked(e.target.checked);
    }
    return (
        <>
            <label>
                <input
                    type="checkbox"
                    checked={liked}
                    onChange={handleChange}
                />
                I liked this
            </label>
            <p>You {liked ? 'liked' : 'did not like'} this.</p>
        </>
    );

（6） useState更新状态

接下来我们在一个函数之中调用三次添加，（42+3=45）结却跟我们想的不一样

import React, { useState } from 'react';
function Counter() {
    const [age, setAge] = useState(42);

    function handleClick() {
        setAge(age + 1); // setAge(42 + 1)
        setAge(age + 1); // setAge(42 + 1)
        setAge(age + 1); // setAge(42 + 1)
    }

    return (
        <>
            <div>
                年龄大小:{age}
            </div>
            <button onClick={handleClick}>
                You pressed me {age} times
            </button>
        </>

    );
}
export default Counter;

更改方式

function handleClick() {
        setAge(a => a + 1); // setAge(42 => 43)
        setAge(a => a + 1); // setAge(42 => 43)
        setAge(a => a + 1); // setAge(42 => 43)
    }

（7）复杂变量修改

👉 更新状态中的对象和数组

React 中状态被认为是只读的，我们更改替换它而不是改变现有的对象。

例如，如果你有一个状态为 form 的对象，不要改变它

官方给我们的案例是这样子的:

// 🚩 Don't mutate an object in state like this:  
form.firstName = 'Taylor';


// ✅ Replace state with a new object  

setForm({ 
...form,  
    firstName: 'Taylor'  
});

（8）异步操作获取更新值

在类组件里面，修改值时异步操作可以拿到更新后的值，但是在函数组件，异步获取是拿不到更新后的值的

function App() {
    const [count, setCount] = useState(0)
    const handleClick = () => {
        setCount(count => count + 1)
        console.log("value1: ", count)
        setTimeout(() => {
            console.log("value2: ", count)
        })
    }
    return (
        <div>
            <h4>count: {count}</h4>
            <button onClick={handleClick}>点击更新状态</button>
        </div>
    )
}

function Counter() {
    const [count, setCount] = useState(0)
    const handleClick = () => {
        setCount(count => count + 1)
        console.log("value1: ", count)
        setTimeout(() => {
            console.log("value2: ", count)
        })
    }
    return (
        <div>
            <h4>count: {count}</h4>
            <button onClick={handleClick}>点击更新状态</button>
        </div>
    )
}

我们写一个计算组件，点击以后输出：

value1: 0
value2: 0

在函数组件中是不能通过异步来获取更新的值，我们可以通过 useRef来获取，更改我们的代码

 const countRef = useRef(count)
    countRef.current = count
    const handleClick = () => {
    setCount(count => count + 1)
    console.log("value1: ", countRef.current)
    setTimeout(() => {
        console.log("value2: ", countRef.current)
    })
}

value1: 0
value2: 1

ok！ 异步获取状态成功！