React Hooks
useState
const [count, setCount] = useState(0);
const _useState = useState(0);
const count = _useState[0];
const setCount = _useState[1];
useEffect
useEffect(() => {
console.log('不传参相当于componentDidMount, componentDidUpdate');
});
useEffect(() => {
console.log('不传参相当于componentDidMount, componentDidUpdate');
return () => {
console.log('componentWillUnMount');
};
}, []);
useEffect(() => {
console.log('不传参相当于componentDidMount, componentDidUpdate');
return () => {
console.log('componentWillUnMount');
};
}, [count]);
useContext
import React,{useState,createContext,useContext} from 'react'
function Child(){
const count1=useContext(CountContext)
return (
<h1>{count1}</h1>
)
}
const CountContext=createContext()
function Example3(){
const [count,setCount]=useState(0)
function handleClick(){
setCount(count+1)
}
return (
<div>
点击{count}
<button onClick={handleClick}>clickme</button>
{}
<CountContext.Provider value={count}>
<Child></Child>
</CountContext.Provider>
</div>
)
}
export default Example3
useReducer
import React,{useReducer} from 'react'
export default function ReducerDemo() {
const [count, dispath] = useReducer((state,action)=> {
switch(action){
case 'add':
return state + 1;
case 'sub':
return state - 1;
default:
return state;
}
}, 0);
return (
<div>
<h1 className="title">{count}</h1>
<button onClick={()=> dispath('add')}>Increment</button>
<button onClick={()=> dispath('sub')}>Decrement</button>
</div>
)
}
useMemo
const a = useMemo(()=>{}, []);
useCallback
const a = useCallback(()=>{}, []);
useRef
const dom = useRef()
自定义hooks
function useSize() {
const [size, setSize] = useState({
width: document.documentElement.clientWidth,
height: document.documentElement.clientWidth,
})
const onResize = useCallback(() => {
setSize({
width: document.documentElement.clientWidth,
height: document.documentElement.clientWidth,
})
}, [])
useEffect(() => {
window.addEventListener('resize', onResize);
return () => {
window.removeEventListener('resize', onResize);
}
}, [])
return size;
}