React 自定义hooks最佳实践

import React, { useState, useEffect } from 'react';
 
// 定义一个自定义钩子，用于处理表单输入值的状态管理
function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue);
 
  function handleChange(event) {
    setValue(event.target.value);
  }
 
  return {
    value,
    onChange: handleChange
  };
}
 
// 使用自定义钩子的组件示例
function App() {
  // 使用自定义钩子来管理输入值
  const nameInput = useFormInput('');
 
  return (
    <div>
      <input type="text" {...nameInput} />
      <p>输入的名字是: {nameInput.value}</p>
    </div>
  );
}
 
export default App;

这个代码示例展示了如何创建一个自定义钩子来管理表单输入的状态，并在React组件中使用它。自定义钩子返回一个状态值和一个处理输入变化的函数，这样就可以在组件中直接使用这些值和函数，而不需要重复写状态管理的代码。