react自定义hook

在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 (
    

      
      
      提交
    
  );
}
 
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 (
    

      
{posts.title}
      
{posts.body}
    
  );
}
 
export default App;