react-hooks
Commonly used:
useState
const [state, setState] = useState(initialState);
In the initial state, state is the same as the value of the first parameter initialState passed in .
The setState function is used to update the state.
eg:
import React, {useState} from 'react'
export default function Test() {
const [name, setname] = useState('zli')
return (
<div>
{name} //'zli'
<button onClick={()=>{
setname('zll')//'zll'
}}>changeName</button>
</div>
)
}
</script>
useEffect
const [name, setname] = useState('zli')
//副作用处理
useEffect(()=>{
//如果在这里对name做了修改,那么数组中必须指明对应的依赖(即状态)
setname(name.toUpperCase());
return () => {
console.log('在这里组件被销毁')
}
},[name])
illustrate:
(1) If the second parameter is an empty array, then the first parameter will only go once;
(2) If [name] name exists as a dependency;
(3) As long as it is modified, the first parameter will go once;
(4) Here it can be regarded as reprocessing of state data.
useCallback
Prevent the method from being created again because the component is re-rendered, and act as a cache.
const [name, setname] = useState('zli')
const myFn = useCallback(()=>{
console.log(name);
},[name])
illustrate:
(1) Only when the name is changed, the function will be regenerated;
(2) If an empty array is passed in, the function will be generated for the first time, and will remain unchanged afterwards;
(3) If you do not pass an array, a new function will be generated every time.
use Memo
Perform calculations on state data and finally return a result.
const getResult = useMemo(()=>list.map(n=>n**2),[list])
useRef
const refContainer = React.useRef(initialValue)
useRef returns a mutable ref object whose .current property is initialized to the incoming parameter (initialValue)
Features:
- useRef is a method that can only be used in function components;
- useRef is the fourth method to get ref except string ref, function ref and createRef;
- useRef never changes during the rendering cycle, so it can be used to refer to some data;
- Modifying ref.current will not cause the component to re-render;
- useRef persists after each re-render, while createRef changes each time.
Custom hooks:
(1) Must start with "use";
(2) When we want to share logic between two functions, we extract it into a third function;
(3) Reinterpretation: Encapsulate complex code into functions.