useEffectЖизненный цикл, который можно заменить,componentDidMount, componentWillUnMountа такжеcomponentDidUpdate
использоватьuseEffectЗаканчиватьcomponentDidMountЭффект
function AComponent() {
useEffect(() => {
// TODO
}, []);
}
useEffectВторой параметр[], это означает, что этот эффект будет иметь место только вcomponentDidMountа такжеcomponentWillUnMountпри звонке
componentWillUnMountОбратный вызов, возвращаемый первым параметром, называется
использоватьuseEffectЗаканчиватьcomponentDidUpdateЭффект
function AComponent({source}) {
useEffect(() => {
const subscription = source.subscribe();
// TODO
return () => {
subscription.unsubscribe();
};
}, [source]); // 表示source改变时就是执行一遍
}
forceUpdate
function AComponent() {
const [ignored, forceUpdate] = useReducer(x => x + 1, 0);
function handleClick() {
forceUpdate();
}
}
getDerivedStateFromProps
function ScrollView({row}) {
let [isScrollingDown, setIsScrollingDown] = useState(false);
let [prevRow, setPrevRow] = useState(null);
if (row !== prevRow) {
// Row changed since last render. Update isScrollingDown.
setIsScrollingDown(prevRow !== null && row > prevRow);
setPrevRow(row);
}
return `Scrolling down: ${isScrollingDown}`;
}
получить предыдущийpropsа такжеstate
function Counter() {
const [count, setCount] = useState(0);
const prevCount = usePrevious(count);
return <h1>Now: {count}, before: {prevCount}</h1>;
}
function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
}