1. Visão Geral
Texto original do site oficial do React: Hooks são uma nova proposta de recurso que permite usar estado e outros recursos do React sem escrever classes.
Resumi os motivos para usar Hooks:
1. Resolva a complexa hierarquia de código nas classes.
2. O ciclo de vida de uma classe é complexo.
3. Os componentes sem estado são alterados para componentes com estado devido aos requisitos de trabalho. O custo de alterá-los para componentes de classe é relativamente alto.
2.useState (salvar estado do componente)
Explicação complementar: useState ainda é um componente de memória e só é inicializado uma vez quando o componente é criado. Isso garante que o valor modificado a cada vez possa ser salvo. O código de amostra faz uma simples mudança de nome e a lógica é relativamente simples e pode ser codificada diretamente:
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 (lidar com efeitos colaterais )
Vamos primeiro entender o que são efeitos colaterais: efeitos colaterais significam que o comportamento de uma função ou expressão depende do mundo externo.
Sintaxe: useEffect(()=>{},[]); Dois parâmetros: um parâmetro e uma função para colocar a lógica a ser processada, como solicitações de rede ou processamento lógico. Parâmetro dois array: estado dependente; um array vazio significa sem dependência. Se um array vazio for passado, significa que ele será executado apenas uma vez. Se um estado de dependência for passado, a função que apenas altera o estado dependente será executada uma vez.
Notas adicionais: useEffect não será chamado até que toda a página seja renderizada, o que é semelhante ao ciclo de vida dos componentes da classe, mas não exatamente o mesmo. O código de exemplo faz uma solicitação de rede simples:
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>
)
}O método de limpeza useEffect, por exemplo, se você definir um temporizador no método de retorno de chamada useEffect, ele deverá ser destruído quando o componente desaparecer. Código para cima
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 ( função de memória )
useCallback(()=>{},[]); Este método retorna um método de função. Parâmetro um: função de retorno de chamada. Parâmetro dois: status de dependência; um array vazio significa que não há dependência. Se um array vazio for passado, indica que será executado apenas uma vez. Se o estado de dependência for passado, a função que apenas altera o estado de dependência será executada uma vez e a função atualizada será retornada.
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. use o memorando
O uso de useMemo e useCallback é muito semelhante. useCallback não executará a função do primeiro parâmetro, mas a retornará para você, enquanto useMemo executará a primeira função e retornará o resultado da execução da função para você.
Carregue diretamente o código
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 ou componentes e também pode salvar valores. useRef também possui uma função de memória.
Carregue diretamente o código
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
Os componentes pais passam valores para os componentes filhos. É relativamente simples e direto 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.useRedutor
Exemplo:const [estado, despacho] = useReducer(redutor, estadoinicial);
Alternativa para useState. Aceita (state, action) => newState um redutor do tipo e retorna dispatch o estado atual emparelhado com o método. (Se você conhece Redux, já sabe como funciona.), Extraindo principalmente os métodos de modificação de estado.
UseReducer é usado em combinação com useContext em todas as etapas, o que pode reduzir o nível do código. Carregue diretamente o código
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. Construa seus próprios 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>
)
}