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

Posted 勇敢*牛牛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了hook——useState——useState的并发写法——受控组件—— 自定义hook函数-封装hook相关的知识,希望对你有一定的参考价值。

简介

在 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("");

以上是关于hook——useState——useState的并发写法——受控组件—— 自定义hook函数-封装hook的主要内容,如果未能解决你的问题,请参考以下文章

react使用hook——useState的坑

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

React Hook的注意事项--useState

不能在回调中调用 React Hook “useState”

react的hook踩坑,useState的set方法不生效问题。

HOOK—useState、useEffect的使用