React 经常使用的 Hook

👁 2021-03-16

有关使用 React Hook的一些知识

Hook 是什么？ Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。

1 State Hook

详细请看官方文档
State Hook 可以让函数组件也可以有state状态, 并进行状态数据的读写操作。
语法:

const [xxx, setXxx] = React.useState(initValue)

React.useState()的说明：

参数initValue: 第一次初始化指定的值在内部作缓存
返回值[xxx, setXxx]: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数 //当前 state 以及更新 state 的函数

setXxx()2种写法:

setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值
setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

实现小案例如下：

import React from 'react'
import ReactDOM from 'react-dom'

export default function Count() {

    const [count,setCount] = React.useState(0)
    const [name,setName] = React.useState('lxlx')

    function add(){
        setCount((count) => {
                return ++count
            })    
    }

    function modifyName(){
        setName((name) => {
            return name+=' xinxin'
        })
    }
    return (
        <div>
            <h1>当前数值：{count}</h1>
            <h1>我是：{name}</h1>
            <button onClick={add}>点击+</button>
            <button onClick={modifyName}>点击修改姓名</button>
        </div>
    )
}

2 Effect Hook

详细请看官方文档
Effect Hook，给函数组件增加了操作副作用的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API。
语法：

React.useEffect(() => { 
  // 在此可以执行任何带副作用操作

  // 返回值类似于componentWillUnmount生命周期
  return () => { 
    // 在此做一些收尾工作, 比如清除定时器/取消订阅等
  }
}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行

小案例如下：

    import React from 'react'
    import ReactDOM from 'react-dom'

    export default function Count() {

    const [count,setCount] = React.useState(0)
    const [name,setName] = React.useState('lxlx')
    const myRef = React.useRef()

    // React.useEffect(()=>{
    //     let timer = setInterval(function(){
    //         setCount((count) => {
    //             return ++count
    //         }) 
    //     },1000)
    //     // 返回值类似于componentWillUnmount生命周期
    //     return ()=>{
    //         clearInterval(timer)
    //     }
    // },[])


    // React.useEffect(()=>{
    //     console.log('监听中')    
    // },[count])  //如果指定的是[], 回调函数只会在第一次render()后执行

    function add(){
        setCount((count) => {
                return ++count
            })    
    }

    function modifyName(){
        setName((name) => {
            return name+=' xinxin'
        })
    }
    function unLoad(){
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }
    return (
        <div>
            <h1>当前数值：{count}</h1>
            <h1>我是：{name}</h1>
            <button onClick={add}>点击+</button>
            <button onClick={modifyName}>点击修改姓名</button>
            <button onClick={unLoad}>卸载组件</button>
        </div>
    )
}

3 Ref Hook

详细请看官方文档

Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据。useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。
语法:

const refContainer = useRef()

小案例如下：

import React from 'react'
import ReactDOM from 'react-dom'

export default function Count() {

    const [count,setCount] = React.useState(0)
    const myRef = React.useRef()

    function add(){
        setCount((count) => {
                return ++count
            })    
    }

    function show(){
        alert(myRef.current.value)
    }
    return (
        <div>
            <h1>当前数值：{count}</h1>
            <input type="text" ref={myRef}/>
            <button onClick={add}>点击+</button>
            <button onClick={show}>显示信息</button>
        </div>
    )
}

本文作者： étoile

本文链接： http://sunnyllxx.github.io/2021/03/16/react-use-frequently-hook/

版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！

-------------本文结束感谢您的阅读-------------