常用的 hock-useState

useState:

useState是react提供的一个，定义响应式变量的 hock 函数，当页面中出现的数据，{name} ，当页面渲染成功后，在 改变 name ，name 会发生改变，但是 页面中的 name 呈现不会发生改变了。当我们需要页面中的某些变量，根据操作，视图也发生改变的时候，就需要使用到这个组件了。

定义语法使用：

interface person {

​ name: string,

​ age: number

}

Const [user, setuser] = useState ({name: ‘lmj’ , age: 12});

这样就可以给，name 给定一个初始值，当然如果不想要初始值，也可以设置为空

然后当我们需要改变页面上的内容的时候，我们就需要 使用 setuser

setState 语法：

Setuser({name: ‘swk’, age: 500});

这样就能改变这个user的内容，并且同时还会让视图也重新加载一次。

当然在 初始定义的时候，useState 的内部传入是可传入一个函数的，以这个函数的返回值来做为，初始值；

const [count, setCount] = useState(() => {

​ const initialCount = someExpensiveComputation();

​ return initialCount

})

但是也只能渲染一次。修改同样也可以使用，函数。

setState: 是异步更新数据的

如代码：

interface person {
age: number
}

function Banana() {
// 定义一个对象变量，用来测试
// const user = {
// name: ‘syk’
// }
// 使用 useState 来更新数据
const [count, setcount] = useState(1)
const handleClick = () => {
console.log(‘这是点击后：’, count);
setcount(count => count + 1)
console.log('这是修改后： ', count);
}

return (

    <div>
        Banana
        <br/>
        { count }
        <br/>
        <button className='button' onClick={handleClick}></button>
    </div>

​ )
}

export default Banana;

当我点击后，count会增加，使用setstate 就会让视图也增加。

但是我我们发现 打印依然是，没有更改前的，所以是，等改完成后，才进行了 setstate，

我们加一个 settimeout

发现还是打印的最后的内容。所以是 异步更新 的。

想要拿到 更新后的值，就需要使用 useRef 了

useRef:

如此使用后，就可以获取到更新到内容了

连续使用 setState:

连续使用 setState ，如果 setState 后面 传的是一个简单 赋值

setCount(count + 1) 这样的 方式，那么

就算这样写了很多次：

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

最后 结果，也只会执行一次。只会执行最后一次

如果 setState 内部传入的是，一个 函数，那么就会依次执行了：

const handleClick = () => {
console.log("value1: ", count)
setCount(count => count + 1)
console.log("value2: ", count)
setCount(count => count + 1)
console.log("value3: ", count)
}
当然，打印还是不变

到此/