React 开发 | 常用 Hooks

白墨石

发布于 2022-12-10 15:11:25

7070

发布于 2022-12-10 15:11:25

文章被收录于专栏：生信情报站

useState

作用: 用于函数式组件操作 state，类似于类组件的 setState 写法：[state, setState] = useState(initValue)

state：状态变量名
setState：更新状态函数
initValue：初始值

类组件的 setState

import React, { Component } from 'react'

export default class BaseRender extends Component {
  state = {count:0}

  add = ()=>{
    this.setState(state=>({count: this.state.count+1}))
  }

  render() {
    return (
      <div>
        <h2>{this.state.count}</h2>
        <button onClick={this.add}>Click + 1</button>
      </div>
    )
  }
}

setState 两种写法：

setState(newValue)：参数为非函数，直接指定新状态值
setState(value => newValue)：参数为函数，接收旧状态值，返回新状态值

import React, {useState} from "react";

export default function BaseRender() {
  const [count, setCount] = useState(0);

  function add() {
    setCount(count+1)
  }

  return <div id="mid">
    <h3>{count}</h3>
    <button onClick={add}>Click</button>
  </div>;
}

useEffect

作用： 在函数组件中执行副作用操作，类似于类组件中的生命周期钩子。

useEffect(()=>{
  // 执行任何副作用操作

  return () = {
    // 组件卸载前执行
    // 可以做收尾工作比较清除定时器，取消订阅
  }
},[]) // 如果指定第二个函数，回调函数只会在第一次 render() 后执行，相当于 componentDidMount

副作用操作：

异步数据请求
设置订阅
设置计时器
更改 DOM

可以将 useEffect Hook 看着三个生命周期函数的组合：

componentDidMount()
componentDidUpdate()
componentWillUnmount()

import React, {useEffect, useState, useRef} from "react";
import ReactDOM from "react-dom";

export default function BaseRender() {
  const [count, setCount] = useState(0);

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

  useEffect(()=>{
    let timer = setInterval(()=>{
      setCount(count+1)
    },1000)
    return ()=>{
      clearInterval(timer)
    }
  },[count])

  function unmount(){
    ReactDOM.unmountComponentAtNode(document.getElementById('mid'))
  }

  return <div id="mid">
    <h3>{count}</h3>
    <button  onClick={add}>Click</button>
    <button  onClick={unmount}>unmount root</button>
  </div>;
}

useRef

作用： 在函数组件中存储或查找组件内的标签或其他数据，类似 React.createRef()

const refContainer = useRef()
import React, {useRef} from "react";
import ReactDOM from "react-dom";

export default function BaseRender() {
  const myRef = useRef()

  function show(){
    console.log(111)
    alert(myRef.current.value)
  }

  return <div id="mid">
    <input type="text" ref={myRef}/>
    <button  onClick={show}>Click show ref</button>
  </div>;
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-12-09，如有侵权请联系 cloudcommunity@tencent.com 删除

dom