醉临武-临武县第一中学官网

React hooks 对应 ClassComponent 中的 api和生命周期

useEffect 可以代替的生命周期为 componentDidMount, componentWillUnMountcomponentDidUpdate

使用useEffect完成componentDidMount的效果

function AComponent() {     useEffect(() => {         // TODO     }, []); } 复制代码

useEffect 的第二个参数为[]时,表示这个effect只会在componentDidMountcomponentWillUnMount的时候调用

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

获取之前的 propsstate

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