React入门之ReactHooks基本使用

之前我们谈到React的生命周期，里面有三个比较常用的钩子函数，分别是：

• componentDidMount()：会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方

• componentDidUpdate()：会在更新后会被立即调用。首次渲染不会执行此方法。

• componentWillUnmount()：会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。

但函数组件没有生命周期，如果想要在页面渲染或更新时执行某些操作，可以使用Hooks的useEffect来完成

下面是一个小例子：

当页面加载或重新渲染(数据更新）时，打印出提示语

引入：

import React, { useState, useEffect } from ‘react’

使用：

// 当页面加载或重新渲染时，打印提示语

useEffect(()=>{

console.log(“useEffect正在执行中。。。”)

})

效果：

当页面刷新时，打印一次；

当添加了书目时，又打印了一次：