在react类组件中，有组件间可共享逻辑时，一般用高阶组件的方式对公共逻辑进行复用，在react函数组件中，hook提供了自定义hook函数的方案来对公共逻辑进行复用。
下面可以通过一段表单受控组件中创建value和onChange方法的重用案例来了解自定义hook的基本用法。
代码如下：
import React, { useState } from 'react';
// 自定义hook(use开头)
// 重用受控表单创建state和onChange方法逻辑
/**
*
* @param {string | number} initialValue 初始默认值
* @returns
*/
const useInput = (initialValue) => {
const [value, setValue] = useState(initialValue)
return {
value,
onChange: e => setValue(e.target.value)
}
}
// 表单组件
const FormComponent = () => {
const username = useInput('admin')
const password = useInput('')
const onSubmit = (e) => {
e.preventDefault()
// 获取表单值
console.log(username.value, password.value);
}
return (
<form onSubmit={onSubmit} >
<input type="text" {...username} />
<input type="password" {...password} />
<button type="submit">提交</button>
</form>
);
}
export default FormComponent;
很多组件当中请求数据的方法也可以封装为自定义hook函数，供多个组件共用。
代码如下：
import React, { useEffect, useState } from 'react';
import axios from 'axios'
// 自定义hook
// 封装公共的请求逻辑并返回数据
const usePosts = () => {
const [posts, setPosts] = useState('')
useEffect(() => {
getPosts()
}, [])
const getPosts = async () => {
const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts/1')
setPosts(data)
}
return [posts, setPosts]
}
const App = () => {
const [posts] = usePosts()
return (
<div>
<div>{posts.title}</div>
<div>{posts.body}</div>
</div>
);
}
export default App;
