hook——useState——useState的并发写法——受控组件—— 自定义hook函数-封装hook

Posted 2022-10-03 勇敢*牛牛

简介

在 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;

---

useState的并发写法

• 覆盖
• 这样的写法数据的完整性得不到保证

let[count,setCount] = useState(()=>100)
const add = ()=>
    setCount(count+1)
    setCount(count+1)
    setCount(count+1)
    setCount(count+1)

• 数据的完整性得到时可靠的

const add = ()=>
      setCount(v=>v+1)
      setCount(v=>v+1)
      setCount(v=>v+1)
      setCount(v=>v+1)
    

---

受控组件

const App = () => 
   let [username,setUsername] = useState('')
   let [password,setPassword] = useState('')
    return (
        <div>
           姓名：<input type="text" value=username onChange=(e)=>setUsername(e.target.value)/><br/>
           密码：<input type="text" value=password onChange=e=>setPassword(e.target.value)/>
        </div> 
    );

自定义hook函数

必须是以use开头的函数

function useForm(inintStart = '')
    let [value,setValue] = useState(inintStart)
    return value,onChange:e=>setValue(e.target.value.trim())

let username = useForm("");
let password = useForm("");

姓名：<input type="text" ...username/><br/>
密码：<input type="text" ...password/>

然后就可以提取出去这个函数成为hook文件封装

• hook/useFrom.js

import useStatefrom 'react';

function useForm(inintStart = '')
    let [value,setValue] = useState(inintStart)
    return value,onChange:e=>setValue(e.target.value)

export default useForm

• 导入使用

import useForm from "@/hook/useForm.js"

let username = useForm("");