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.log('-Person---useEffect---')

  }, [personId])

 

自定义Hooks的例子

 

import React, { useState, useEffect } from 'react'

import { Button } from 'antd'

import axios from '@/utils/axios'

import API from '@/config/api'

 

const usePerson = personId => {

const [isLoading, setIsLoading] = useState(false)

const [person, setPerson] = useState({})

useEffect(() => {

console.log('----CL---0000---')

setIsLoading(true)

axios.get(API.home.first_part_list, {

params: {

aa: personId ? '1' : '0',

}

})

.then((res) => {

setIsLoading(false)

setPerson({name: 'shining', height: '158cm', weight: '53kg'})

})

 

}, [personId])

return [isLoading, person]

}

 

const Person = ({ personId }) => {

const [isLoading, person] = usePerson(personId)

if (isLoading) {

return <p>Loading....</p>

}

 

return (

<div>

<p>You're viewing: {person.name}</p>

<p>Height: {person.height}</p>

<p>Weight: {person.weight}</p>

</div>

)

}

 

const Case2 = () => {

const [personId, setPersonId] = useState('')

return(

<div>

------ Case2------

<Person personId={personId}/>

<Button onClick={() => {

setPersonId(!personId)

}}>点击点击-测试自定义Hooks</Button>

</div>

)

}

 

export default Case2