hook函数——react——同步获取useState的最新状态值

简介

在 React 的世界中，有容器组件和 UI 组件之分，在 React Hooks 出现之前，UI 组件我们可以使用函数组件，无状态组件来展示 UI，而对于容器组件，函数组件就显得无能为力，我们依赖于类组件来获取数据，处理数据，并向下传递参数给 UI 组件进行渲染。React在v16.8 的版本中推出了 React Hooks 新特性，Hook是一套工具函数的集合,它增强了函数组件的功能，hook不等于函数组件，所有的hook函数都是以use开头。

---

使用 React Hooks 相比于从前的类组件有以下几点好处：

• 代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者修改代码时不易去查找，通过 React Hooks 可以将功能代码聚合，方便维护
• 组件树层级变浅，在原本的代码中，我们经常使用 HOC/render/Props 等方式来复用组件的状态，增强功能等，无疑增加了组件树层数及渲染，而在 React Hooks 中，这些功能都可以通过强大的自定义的 Hooks 来实现

---

使用hook限制

• hook只能用在函数组件中，class组件不行
• 普通函数不能使用hook，默认只能是函数组件才能用
• 例外：普通函数名称以use开头也可以,(自定义的函数以use开头，称为自定义hook)
• 函数组件内部的函数也不能使用hook
• hook函数一定要放在函数组件的第一层，别放在if/for中(块级作用域)
• 要求函数组件名称必须首字母大写

---

useState

保存组件状态，功能类似于类组件中的this.state状态管理

---

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

• 语法——值的存储使用了闭包
• ​​let [变量，函数] = useState(值|()=>值)​​
• 变量就可以得到useState中的值，函数就可以修改值

import React from 'react';

const App = () => {
return (
<div>

</div>
    );
}
export default App;

相当于在App函数组件是定义一个state数据，变量名为 count,修改此count的值的方法为setCount

const App = () => {
// let[count ,setCount] = useState(100)
let[count,setCount] = useState(()=>100)
let[count1,setCount1] = useState(()=>200)
const add = ()=>{
setCount(count+1)
    }
const add1 = ()=>{
setCount1(count1+1)
    }
return (
<div>
<h1>{count}</h1>
<h1>{count1}</h1>
<button onClick={add}>add</button>
<button onClick={add1}>add1</button>
</div> 
    );
}

export default App;