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;
}