React–》如何在函数式组件中操作状态和方法？

飞熊 • 2023年4月25日上午9:57 • 技术随笔 • 阅读 248

Hooks

Hooks是React16.8.0版本增加的新特性语法，可让我们在函数式组件中使用state以及其他React特性，在路由的v6版本中也明确告诉我们必须使用函数式组件，官方不断推荐函数式语法，可见未来的React趋势就是函数式组件写法。接下来讲解在函数式组件中如何操作状态和方法：

State Hook：React.useState()

(1). state Hook让函数组件也可以有state状态，并进行状态数据的读写操作。

(2)．语法: const [xxx，setXxx] = React.useState(initvalue)。

(3). useState()说明：

参数：第一次初始化指定的值在内部作缓存。

返回值：包含2个元素的数组，第1个为内部当前状态值，第2个为更新状态值的函数。
(4). setxxx()的2种写法:
setXxx(newvalue)：参数为非函数值，直接指定新的状态值，内部用其覆盖原来的状态值。
setXxx(value => newvalue)：参数为函数，接收原本的状态值，返回新的状态值，内部用其覆盖原来的状态值。

根据上面对该Hook函数使用方法的介绍，下面举个例子来简单使用：

import React from 'react'

export default function App() {
  // 设置初始值为0
  const [count,setCount] = React.useState(0)
  // 设置+1函数
  function add(){
    // setCount(count+1) // 第一种写法
    setCount(count => count +1) // 第二种写法
  }
  return (
    <div>
      <h2>当前的值为：{count}</h2>
      <button onClick={add}>点我+1</button>
    </div>
  )
}

Effect Hook：React.useEffect()

(1). Effect Hook 可以在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)

(2). React中的副作用操作：
发ajax请求数据、获取设置订阅/启动定时器、手动更改真实DOM等。

(3). 可以把useEffect Hook 看作是以下三个函数的集合：

componentDidMount()、componentDidUpdate()、componentWillUnmount()

根据上面对该Hook函数使用方法的介绍，下面举个例子来简单使用：

import React from 'react'

export default function App() {
  // 设置初始值为0
  const [time,setTime] = React.useState(0)
  React.useEffect(()=>{
    console.log('我执行的次数')
    setInterval(()=>{
      setTime(count => count +1)
    },1000)
  },[])
  return (
    <div>
      <h2>当前计时的时间：{time}</h2>
    </div>
  )
}

如果想执行卸载阶段，需要在useEffect中再返回一个函数，如下：

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

export default function App() {
  // 设置初始值为0
  const [time,setTime] = React.useState(0)
  React.useEffect(()=>{
    let timer = setInterval(()=>{
      setTime(count => count +1)
    },1000)
    return ()=>{
      // 卸载阶段清除定时器
      console.log('组件被卸载了')
      clearInterval(timer)
    }
  },[])
  // 卸载组件
  function unmount(){
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
  }
  return (
    <div>
      <h2>当前计时的时间：{time}</h2>
      <button onClick={unmount}>卸载组件</button>
    </div>
  )
}

Ref Hook：React.useRef()

(1). Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据。

(2). 语法: const refcontainer = useRef()。
(3)．作用：保存标签对象，功能与React.createRef()一样。

import React from 'react'

export default function App() {
  // 创建Ref容器
  const myRef = React.useRef()
  // 卸载组件
  function show(){
    alert(myRef.current.value)
  }
  return (
    <div>
      <input type="text" ref={myRef} />
      <button onClick={show}>点我展示当前的值</button>
    </div>
  )
}