Что такое хуки в 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> ) }