我已经通过了React v16.7.0中引入的钩子。
https://reactjs.org/docs/hooks-intro.html
因此,我对钩子的理解是,我们可以在功能组件中使用状态,而无需在react中编写类组件。这真是一个了不起的功能。
但是我对在功能组件中使用钩子一无所知。
import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
如果使用钩子,如何在上述功能组件中使用生命周期方法?
以下是最常见生命周期的示例:
componentDidMount
传递一个空数组作为第二个参数,useEffect()以仅在安装时仅运行回调。
useEffect()
function Example() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; }, []); // Pass an empty array to run only callback on mount only. return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
componentDidUpdate
通过仅将单个参数传递到中useEffect,它将在每次渲染后运行。这是一个宽松的对等物,因为这里略有不同componentDidUpdate,在第一个渲染之后将不会运行,但是此挂钩版本将在每次渲染之后运行。
useEffect
function Example() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; }); // No second argument, so run after every render. return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
该示例与上面的示例的不同之处在于,此处的回调不会在初始渲染上运行,而是严格模拟的语义componentDidUpdate。这个答案是由Tholle负责的。
function Example() { const [count, setCount] = useState(0); const firstUpdate = useRef(true); useLayoutEffect(() => { if (firstUpdate.current) { firstUpdate.current = false; return; } console.log('componentDidUpdate'); }); return ( <div> <p>componentDidUpdate: {count} times</p> <button onClick={() => { setCount(count + 1); }} > Click Me </button> </div> ); }
componentWillUnmount
在useEffect的callback参数中返回一个回调,它将在卸载前被调用。
function Example() { const [count, setCount] = useState(0); useEffect(() => { // Return a callback in useEffect and it will be called before unmounting. return () => { console.log('componentWillUnmount!'); }; }, []); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
shouldComponentUpdate
您已经可以使用React.PureComponent或在组件级别实现此目的React.memo。为了防止子组件的重新渲染,该示例取自React docs:
React.PureComponent
React.memo
function Parent({ a, b }) { // Only re-rendered if `a` changes: const child1 = useMemo(() => <Child1 a={a} />, [a]); // Only re-rendered if `b` changes: const child2 = useMemo(() => <Child2 b={b} />, [b]); return ( <> {child1} {child2} </> ) }
getDerivedStateFromProps
同样,取自React文档
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}`; }
getSnapshotBeforeUpdate
目前还没有等效的钩子。
componentDidCatch