React Hooks 钩子函数的使用

v16.8 版本引入

设计目的：加强版函数组件，完全不使用"类"，就能写出一个全功能的组件

钩子使用use前缀命名，要使用 xxx 功能，钩子就命名为 usexxx。

React默认提供的4种钩子

• useState() // 状态钩子
• useContext() // 共享状态钩子
• useReducer() // action 钩子
• useEffect() // 副作用钩子

 

eg.

useState的使用

import React, { useState } from 'react';

 

// 分别定义state中的字段，并在useState()中赋初值

const [value, setValue] = useState(''); 

const [loading, setLoading] = useState(false);

const [list, setList] = useState([]);

 

setLoading(true); // 设置state中的loading的值为true

setList(res.data.data || []); // 设置state中的list的值

 

useEffect的使用

useEffect(() => {

    // personId发生变化（想几个参数变化就可以添加进去），useEffect()就会执行。组件第一次渲染时，useEffect()也会执行，放在componentDidMount里面的代码可以放这儿了,接口请求啥的

    console.l