1. Información general
Texto original del sitio web oficial de React: Los ganchos son una nueva propuesta de funciones que le permite utilizar el estado y otras funciones de React sin escribir clases.
Resumí las razones para usar Hooks:
1. Resuelva la compleja jerarquía de códigos en clases.
2. El ciclo de vida de una clase es complejo.
3. Los componentes sin estado se cambian a componentes con estado debido a requisitos de trabajo y el costo de cambiarlos a componentes de clase es relativamente alto.
2.useState (guardar estado del componente)
Explicación complementaria: useState sigue siendo un componente de memoria y solo se inicializa una vez cuando se crea el componente, lo que garantiza que el valor modificado cada vez se pueda guardar. El código de muestra realiza un cambio de nombre simple y la lógica es relativamente simple y se puede codificar directamente:
import React, { useState } from 'react'
export default function App() {
const [name,setName]=useState('张三')
return (
<div>App-{name}
<button onClick={()=>{
setName('李四') //把name张三修改成了李四
console.log(name);
}}>修改</button>
</div>
)
}3.useEffect (manejo de efectos secundarios )
Primero, comprendamos qué son los efectos secundarios. Los efectos secundarios significan que el comportamiento de una función o expresión depende del mundo externo.
Sintaxis: useEffect(()=>{},[]); Dos parámetros: un parámetro y una función para procesar la lógica, como solicitudes de red o procesamiento lógico. Parámetro dos matriz: estado dependiente; una matriz vacía significa que no hay dependencia. Si se pasa una matriz vacía, significa que solo se ejecutará una vez. Si se pasa un estado de dependencia, se ejecutará la función que solo cambia el estado dependiente una vez.
Notas adicionales: no se llamará a useEffect hasta que se represente toda la página, lo cual es similar al ciclo de vida de los componentes de la clase, pero no exactamente igual. El código de muestra realiza una solicitud de red simple:
import React, { useEffect, useState } from 'react'
import axios from 'axios'
export default function App() {
const [list, setList] = useState([])
useEffect(() => {
axios({
method: 'get',
url: 'move.json'
}).then(res => {
console.log(res.data.data);
setList(res.data.data.films)
})
},
[])//传空数组，表示不依赖任何东西
return (
<div>
<ul>
{list.map(item => <li key={item.filmId}>{item.name}</li>)}
</ul>
</div>
)
}El método de limpieza de UseEffect, por ejemplo, si configura un temporizador en el método de devolución de llamada useEffect, debería destruirse cuando el componente desaparezca. código arriba
import React, { useEffect, useState } from 'react'
export default function App() {
const [show, setShow] = useState(true)
return (
<div>
<button onClick={() => {
setShow(false)
}}>销毁</button>
{show ? <Child></Child> : ""}
</div>
)
}
function Child() {
let timer = null
const [name, setName] = useState('张三')
useEffect(() => {
console.log(name);
timer = setInterval(() => {
console.log('定时器');
}, 1000)
//销毁是执行一次，依赖更新一次也会执行一次。
return () => {
clearInterval(timer)
timer = null
console.log('xiaohui');
}
}, [name])
return (
<div><button onClick={() => {
setName('李四')
}}>Child</button></div>
)
}
4. useCallback ( función de memoria )
useCallback(()=>{},[]); este método devuelve un método de función. Parámetro uno: función de devolución de llamada. Parámetro dos: estado de dependencia; una matriz vacía significa que no hay dependencia. Si se pasa una matriz vacía, indica que solo se ejecutará una vez. Si se pasa el estado de dependencia, la función que solo cambia el estado de dependencia se ejecutará una vez y se devolverá la función actualizada.
import React, { useCallback, useState } from 'react'
export default function App() {
const [name,setName]=useState('张三')
let sum=0;
console.log(sum);
const handleAdd=useCallback(()=>{
console.log(sum++);
setName('lisi'+sum)
},[])
//只有name改变后， 这个函数才会重新声明一次，
//如果传入空数组， 那么就是第一次创建后就被缓存， 如果name后期改变了,拿到的还是老的name。
//如果不传第二个参数，每次都会重新声明一次，拿到的就是最新的name
return (
<div>
app-{name}
<button onClick={ handleAdd}>anniu </button></div>
)
}
5. usa notas
El uso de useMemo y useCallback son muy similares: useCallback no ejecutará la función del primer parámetro, sino que se la devolverá, mientras que useMemo ejecutará la primera función y le devolverá el resultado de la ejecución de la función.
Sube el código directamente
import React, { useMemo, useState } from 'react'
export default function App() {
const [name, setName] = useState('xiaoming')
const handleName = useMemo(() => name.toLocaleUpperCase(), [name])
return (
<div>App-{handleName}
<button onClick={()=>{
setName('lisi')
}}>gaibian</button>
</div>
)
}
6.useRef
useRef vincula DOM o componentes y también puede guardar valores. useRef también tiene una función de memoria.
Sube el código directamente
import React, { useRef } from 'react'
export default function App() {
//绑定dom或者组件
const ref = useRef()
//useref保存值
const myCount=useRef(0)
return (
<div>
<input ref={ref}></input>
<button onClick={() => {
console.log(ref.current.value);
ref.current.value = '';
myCount.current++;
console.log(myCount.current);
}}>按钮</button>
</div>
)
}7.useContexto
Los componentes principales pasan valores a los componentes secundarios. Es relativamente simple y directo de codificar.
import React, { useContext } from 'react'
const Context =React.createContext()
export default function App() {
return (
<Context.Provider
value={
{name:'lisi'}}>
<div>
<Ietm></Ietm>
</div>
</Context.Provider>
)
}
function Ietm(){
const value=useContext(Context)
return (
<div>ietm-{value.name}</div>
)
}8.useReductor
Descripción: const [estado, despacho] = useReducer(reductor, estado inicial);
Alternativa al uso del Estado. Acepta (state, action) => newState un reductor de tipo y devuelve dispatch el estado actual emparejado con el método. (Si está familiarizado con Redux, ya sabe cómo funciona), principalmente extrayendo los métodos de modificación del estado.
UseReducer se usa en combinación con useContext en cada paso, lo que puede reducir el nivel del código. Sube el código directamente
import React, { useContext, useReducer } from 'react'
//preState 老状态 action改变的类型
function reducer(preState, action) {
let newSate = { ...preState };
switch (action.type) {
case "add":
newSate.count++
return newSate;
case "sub":
newSate.count--
return newSate;
}
return preState;
}
const initialState = {
count: 0
}
const Context = React.createContext()
export default function App() {
const [state, dispatch] = useReducer(reducer, initialState)
return (
<Context.Provider value={
{ state, dispatch }}>
<div>
<Child></Child>
</div>
</Context.Provider>
)
}
function Child() {
const { state, dispatch } = useContext(Context)
return (
<div>
计数器：{state.count}
<div>
<button
onClick={() => {
dispatch({ type: "add" })
}}
>+</button>
<button
onClick={() => {
dispatch({ type: "sub" })
}}
>-</button>
</div>
</div>
)
}
9. Construye tus propios ganchos
import React, { useEffect, useState } from 'react'
function useToLocaleUpperCase(text) {
const [name, setName] = useState(text)
useEffect(() => {
setName(name.toLocaleUpperCase())
}, [])
return { name };
}
export default function App() {
const { name } = useToLocaleUpperCase('zhansan')
return (
<div>App-{name}
<Child></Child>
</div>
)
}
function Child() {
const { name } = useToLocaleUpperCase('lisi')
return (
<div>App-{name}</div>
)
}