Использование хуков в функциональных компонентах React — useState(), useEffect(), useRef()

Что такое хуки в React?

В реакции ловушка — это новая функция React16.8, которая используется для использования состояния и других функций реакции без написания класса; функциональные компоненты могут использоваться для использования некоторых функций в реакции, а функциональные компоненты также могут иметь состояние, реализовывать общее состояние операции между компонентами через пользовательские хуки.

1.useState()

грамматика:

const [valueName,setValue]=useState(initValue);

initValue: значение инициализации состояния

valueName: значение состояния

setValue: функция обновления статуса

Примечание. Функция обновления состояния useState отличается от setState() в компонентах класса, эта функция перезапишет исходное значение состояния.

import React,{
    
    useState}from 'react'

export default function Demo() {
    
    
  const [name,setName]=useState("zhangsan");
  const changeName=()=>{
    
    
    setName("lisi")
  }
  return (
    <Fragment>
       <div>{
    
    name}</div>
       <button onClick={
    
    changeName}></button>
    </Fragment>
    
  )
}

2.использовать эффект()

Effect Hook может имитировать три хука в функциональных компонентах: componentDidMount, componentDidUpdate,componentWillUnmount

грамматика:

useEffect(()=>{
    
    
    
    return()=>{
    
    
        //组件卸载前执行，即componentWillUnmount钩子
        
    }
},[stateValue])

• returnФункция с первым аргументом эквивалентнаcomponentWillUnmount

• Второй массив параметров пуст, что означает, что он не отслеживает никаких обновлений состояния и выполняет вывод только при первом отображении страницы, что эквивалентноcomponentDidMount

• Второй массив параметров записывает состояние, что означает, что отслеживается только обновление этих состояний, что эквивалентноcomponentDidUpdate

  import React,{
        
        useEffect} from 'react'
  import PubSub from "pubsub-js"
  
  export default function Demo() {
        
        
    const [age,setValue]=useEffect(22);
    const setAge=(msg,data)=>{
        
        
      setValue(data)
    }
    useEffect(()=>{
        
        
      //消息订阅
      PubSub.subscribe("age",setAge);
      return()=>{
        
        
        //取消订阅
        PubSub.unsubscribe("age");
      }
    },[])
    return (
      <div>{
        
        age}</div>
    )
  }
  
  

3. использовать ссылку ()

• Ref HookМетки или другие данные внутри функциональных компонентов могут быть сохранены или просмотрены

• Контейнер для хранения объектов этикетки, React.createRef()аналогичный , также выделен

  import React,{
        
        useRef} from 'react'
  function Demo() {
        
        
    const input1 = useRef()
    function show() {
        
        
      alert(input1.current.value)
    }
  
    return (
      <div>
        <input type="text" ref={
        
        input1} />
        <button onClick={
        
        show}>点击</button>
      </div>
    )
  }