在 React 16.8 之前,函数组件只能是无状态组件,也不能访问 react 生命周期。hook 做为 react 新增特性,可以让我们在不编写 class 的情况下使用 state 以及其他的 react 特性,例如生命周期。接下来我们便举例说明如何使用 hooks 来模拟比较常见的 class 组件生命周期。
class 组件
class Example extends Component { constructor() { super(); this.state = { count: 0 } } render() { return null; } }
函数组件不需要构造函数,可以通过调用 useState 来初始化 state
function Example() { const [count, setCount] = useState(0); return null; }
class 组件访问 componentDidMount
class Example extends React.Component { componentDidMount() { console.log('I am mounted!'); } render() { return null; } }
function Example() { useEffect(() => console.log('mounted'), []); return null; }
useEffect 拥有两个参数,第一个参数作为回调函数会在浏览器布局和绘制完成后调用,因此它不会阻碍浏览器的渲染进程。
第二个参数是一个数组
class 组件访问 shouldComponentUpdate
shouldComponentUpdate(nextProps, nextState){ console.log('shouldComponentUpdate') // return true 更新组件 // return false 则不更新组件 }
hooks 模拟 shouldComponentUpdate
const MyComponent = React.memo( _MyComponent, (prevProps, nextProps) => nextProps.count !== prevProps.count )
React.memo 包裹一个组件来对它的 props 进行浅比较,但这不是一个 hooks,因为它的写法和 hooks 不同,其实React.memo 等效于 PureComponent,但它只比较 props。
class 组件访问 componentDidUpdate
componentDidMount() { console.log('mounted or updated'); } componentDidUpdate() { console.log('mounted or updated'); }
使用 hooks 模拟 componentDidUpdate
useEffect(() => console.log('mounted or updated'));
值得注意的是,这里的回调函数会在每次渲染后调用,因此不仅可以访问 componentDidUpdate,还可以访问componentDidMount,如果只想模拟 componentDidUpdate,我们可以这样来实现。
const mounted = useRef(); useEffect(() => { if (!mounted.current) { mounted.current = true; } else { console.log('I am didUpdate') } });
useRef 在组件中创建“实例变量”。它作为一个标志来指示组件是否处于挂载或更新阶段。当组件更新完成后在会执行 else 里面的内容,以此来单独模拟 componentDidUpdate。
class 组件访问 componentWillUnmount
componentWillUnmount() { console.log('will unmount'); }
hooks 模拟 componentWillUnmount
useEffect(() => { return () => { console.log('will unmount'); } }, []);
当在 useEffect 的回调函数中返回一个函数时,这个函数会在组件卸载前被调用。我们可以在这里面清除定时器或事件监听器。