React hooks useState

概述：

类组件中有一个状态属性，可以通过此特殊属性完成私有数据的操作。操作此 state 数据可以触发视图更新（this.setState()）。

函数组件中，从 react16.8 之后，提供一个 hook 函数 useState 方法，它可以模拟出类组件中的状态。

语法：

let [变量，函数] = useState(值|()=>值)

变量就可以得到useState中的值，函数就可以修改值。值的存储使用了闭包。

使用：

import React, { useState } from 'react';

const App = () => {
// 相当于在App函数组件是定义一个state数据，变量名为 count,修改此count的值的方法为setCount
// 写法1：值
// let [count, setCount] = useState(100)

// 有的时候，在项目中的初始数据，要经过一系列的运算才能出来的初始值，这时候就可以使用函数的写法
// 写法2：函数
let [count, setCount] = useState(() => 100)

const addCount = () => {
setCount(count + 1)
}

return (
<div>
<h1>{count}</h1>
<button onClick={addCount}>++++</button>
</div>
);
}

export default App;

__EOF__

本文作者：时光
本文链接：https://www.cnblogs.com/SHGG/p/16835052.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！