React Hooks最佳实践：写出优雅高效的组件代码

目录

• 引言
• useState使用技巧
• useEffect最佳实践
• 自定义Hooks开发
• 性能优化Hooks
• 常见陷阱与解决方案
• 总结

引言

React Hooks自React 16.8版本推出以来，彻底改变了我们编写React组件的方式。它让函数组件拥有了状态管理和副作用处理能力，代码更加简洁和可复用。然而，Hooks的使用也有许多最佳实践需要遵循。本文将深入探讨React Hooks的7大核心技巧，帮助你写出更优雅、更高效的React代码。

useState使用技巧

1. 函数式初始化状态

对于计算成本较高的初始状态，使用函数式初始化可以避免每次渲染都重新计算。

// 不推荐 - 每次渲染都会执行
const [data, setData] = useState(expensiveCalculation());

// 推荐 - 只在初始化时执行一次
const [data, setData] = useState(() => expensiveCalculation());

// 示例：从localStorage读取初始状态
const [user, setUser] = useState(() => {
  const savedUser = localStorage.getItem('user');
  return savedUser ? JSON.parse(savedUser) : null;
});

2. 批量状态更新

当需要更新多个相关状态时，使用函数式更新确保基于最新状态。

// 不推荐 - 可能基于旧状态
const [count, setCount] = useState(0);
const [doubled, setDoubled] = useState(0);

const increment = () => {
  setCount(count + 1);
  setDoubled(count * 2); // 可能使用旧的count值
};

// 推荐 - 使用函数式更新
const increment = () => {
  setCount(prev => prev + 1);
  setDoubled(prev => prev * 2);
};

// 更好的方案 - 合并相关状态
const [state, setState] = useState({ count: 0, doubled: 0 });

const increment = () => {
  setState(prev => ({
    count: prev.count + 1,
    doubled: (prev.count + 1) * 2
  }));
};

3. 使用useReducer管理复杂状态

对于复杂的状态逻辑，useReducer比useState更合适。

// 使用useReducer管理表单状态
const initialState = {
  username: '',
  email: '',
  password: '',
  errors: {}
};

function formReducer(state, action) {
  switch (action.type) {
    case 'SET_FIELD':
      return {
        ...state,
        [action.field]: action.value,
        errors: { ...state.errors, [action.field]: '' }
      };
    case 'SET_ERROR':
      return {
        ...state,
        errors: { ...state.errors, [action.field]: action.error }
      };
    case 'RESET':
      return initialState;
    default:
      return state;
  }
}

function LoginForm() {
  const [state, dispatch] = useReducer(formReducer, initialState);

  const handleChange = (field) => (e) => {
    dispatch({ type: 'SET_FIELD', field, value: e.target.value });
  };

  return (
    <form>
      <input
        value={state.username}
        onChange={handleChange('username')}
      />
      {/* 其他表单字段 */}
    </form>
  );
}

useEffect最佳实践

1. 正确处理依赖数组

确保依赖数组包含所有外部依赖，避免闭包陷阱。

// 不推荐 - 缺少依赖
useEffect(() => {
  const interval = setInterval(() => {
    console.log(count); // count可能不是最新值
  }, 1000);
  return () => clearInterval(interval);
}, []); // 缺少count依赖

// 推荐 - 包含所有依赖
useEffect(() => {
  const interval = setInterval(() => {
    console.log(count);
  }, 1000);
  return () => clearInterval(interval);
}, [count]);

// 更好的方案 - 使用函数式更新
useEffect(() => {
  const interval = setInterval(() => {
    setCount(prev => prev + 1); // 不需要依赖count
  }, 1000);
  return () => clearInterval(interval);
}, []);

2. 分离不同类型的副作用

将不同类型的副作用分离到不同的useEffect中，提高代码可读性。

// 不推荐 - 所有副作用混在一起
useEffect(() => {
  // 订阅事件
  const handler = () => console.log('click');
  document.addEventListener('click', handler);
  
  // 获取数据
  fetchData().then(data => setData(data));
  
  // 设置定时器
  const timer = setInterval(() => {}, 1000);
  
  return () => {
    document.removeEventListener('click', handler);
    clearInterval(timer);
  };
}, []);

// 推荐 - 分离不同副作用
useEffect(() => {
  // 事件订阅
  const handler = () => console.log('click');
  document.addEventListener('click', handler);
  return () => document.removeEventListener('click', handler);
}, []);

useEffect(() => {
  // 数据获取
  fetchData().then(data => setData(data));
}, []);

useEffect(() => {
  // 定时器
  const timer = setInterval(() => {}, 1000);
  return () => clearInterval(timer);
}, []);

3. 使用自定义Hook封装副作用逻辑

将复杂的副作用逻辑封装到自定义Hook中，提高复用性。

// 封装数据获取逻辑
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    setError(null);

    fetch(url)
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
}

// 使用示例
function UserProfile({ userId }) {
  const { data: user, loading, error } = useFetch(`/api/users/${userId}`);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>加载失败</div>;

  return <div>{user.name}</div>;
}

自定义Hooks开发

1. 遵循命名规范

自定义Hook必须以"use"开头，这是React的约定。

// 好的自定义Hook命名
function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const saved = localStorage.getItem(key);
    return saved ? JSON.parse(saved) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

// 使用示例
function App() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  return <div className={theme}>Hello</div>;
}

2. 封装表单处理逻辑

创建可复用的表单Hook，简化表单处理。

function useForm(initialValues, validate) {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});
  const [touched, setTouched] = useState({});

  const handleChange = (name) => (e) => {
    setValues(prev => ({ ...prev, [name]: e.target.value }));
  };

  const handleBlur = (name) => () => {
    setTouched(prev => ({ ...prev, [name]: true }));
    if (validate) {
      const validationErrors = validate(values);
      setErrors(validationErrors);
    }
  };

  const handleSubmit = (callback) => (e) => {
    e.preventDefault();
    if (validate) {
      const validationErrors = validate(values);
      setErrors(validationErrors);
      if (Object.keys(validationErrors).length === 0) {
        callback(values);
      }
    } else {
      callback(values);
    }
  };

  return {
    values,
    errors,
    touched,
    handleChange,
    handleBlur,
    handleSubmit
  };
}

// 使用示例
function() {
  const validate = (values) => {
    const errors = {};
    if (!values.email) errors.email = '邮箱必填';
    if (!values.password) errors.password = '密码必填';
    return errors;
  };

  const { values, errors, handleChange, handleSubmit } = useForm(
    { email: '', password: '' },
    validate
  );

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <input
        name="email"
        value={values.email}
        onChange={handleChange('email')}
      />
      {errors.email && <span>{errors.email}</span>}
      <button type="submit">提交</button>
    </form>
  );
}

3. 封装窗口尺寸监听

创建响应式的窗口尺寸Hook。

function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

// 使用示例
function ResponsiveComponent() {
  const { width } = useWindowSize();
  const isMobile = width < 768;

  return isMobile ? <MobileView /> : <DesktopView />;
}

性能优化Hooks

1. 使用useMemo缓存计算结果

对于昂贵的计算，使用useMemo避免重复计算。

function ExpensiveComponent({ items, filter }) {
  // 不推荐 - 每次渲染都重新计算
  const filteredItems = items.filter(item => 
    item.name.includes(filter)
  );

  // 推荐 - 只在依赖变化时重新计算
  const filteredItems = useMemo(() => 
    items.filter(item => item.name.includes(filter)),
    [items, filter]
  );

  return <ul>{filteredItems.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
}

2. 使用useCallback缓存函数

缓存回调函数，避免子组件不必要的重新渲染。

function ParentComponent() {
  const [count, setCount] = useState(0);

  // 不推荐 - 每次渲染都创建新函数
  const handleClick = () => {
    console.log('clicked');
  };

  // 推荐 - 函数引用保持稳定
  const' handleClick = useCallback(() => {
    console.log('clicked');
  }, []);

  // 带参数的回调
  const handleItemClick = useCallback((id) => {
    console.log('item clicked:', id);
  }, []);

  return <ChildComponent onClick={handleClick} onItemClick={handleItemClick} />;
}

3. 使用useRef保存可变值

useRef可以保存不会触发重新渲染的可变值。

function TimerComponent() {
  const [count, setCount] = useState(0);
  const timerRef = useRef(null);

  const startTimer = () => {
    if (timerRef.current) return; // 防止重复启动

    timerRef.current = setInterval(() => {
      setCount(prev => prev + 1);
    }, 1000);
  };

  const stopTimer = () => {
    if (timerRef.current) {
      clearInterval(timerRef.current);
      timerRef.current = null;
    }
  };

  useEffect(() => {
    return () => stopTimer(); // 组件卸载时清理
  }, []);

  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={startTimer}>开始</button>
      <button onClick={stopTimer}>停止</button>
    </div>
  );
}

常见陷阱与解决方案

1. 在条件语句中使用Hooks

问题： Hooks必须在组件的顶层调用，不能在条件、循环或嵌套函数中使用。

// 不推荐 - 在条件中使用Hook
function BadComponent({ condition }) {
  if (condition) {
    const [state, setState] = useState(0); // 错误！
  }
  return <div>...</div>;
}

// 推荐 - 始终在顶层调用Hook
function GoodComponent({ condition }) {
  const [state, setState] = useState(0);
  
  if (!condition) {
    return null;
  }
  
  return <div>{state}</div>;
}

2. 依赖数组中的对象引用问题

问题： 对象和数组作为依赖时，引用变化会导致无限循环。

// 不推荐 - 对象引用每次都不同
function BadComponent() {
  const options = { method: 'GET' }; // 每次渲染都是新对象
  
  useEffect(() => {
    fetchData(options);
  }, [options]); // 无限循环！
}

// 推荐 - 使用useMemo或useRef
function GoodComponent() {
  const options = useMemo(() => ({ method: 'GET' }), []);
  
  useEffect(() => {
    fetchData(options);
  }, [options]);
}

3. 在useEffect中直接使用async函数

问题： useEffect不能直接返回async函数。

// 不推荐 - 直接使用async
useEffect(async () => {
  const data = await fetchData();
  setState(data);
}, []);

[]); // 推荐 - 使用IIFE或单独的async函数
useEffect(() => {
  const fetchDataAndSetState = async () => {
    const data = await fetchData();
    setState(data);
  };
  
  fetchDataAndSetState();
}, []);

// 或者
useEffect(() => {
  (async () => {
    const data = await fetchData();
    setState(data);
  })();
}, []);

总结

React Hooks为我们提供了更优雅的组件编写方式，但要充分发挥其威力，需要遵循以下最佳实践实践：

1. 状态管理

• 使用函数式初始化避免重复计算
• 复杂状态使用useReducer
• 相关状态考虑合并

2. 副作用处理

• 正确设置依赖数组
• 分离不同类型的副作用
• 封装可复用的副作用逻辑

3. 自定义Hooks

• 遵循"use"命名规范
• 封装通用逻辑提高复用性
• 保持Hook的单一职责

4. 性能优化

• 使用useMemo缓存计算结果
• 使用useCallback缓存回调函数
• 合理使用useRef保存可变值

5. 避免陷阱

• Hooks必须在顶层调用
• 注意依赖数组的引用问题
• 正确处理async副作用

掌握这些Hooks最佳实践，将帮助你写出更清晰、更高效、更易维护的React代码。记住，Hooks的强大之处在于其组合性，通过组合简单的Hooks可以构建出复杂而优雅的组件逻辑。

---

本文首发于掘金，欢迎关注我的专栏获取更多前端技术干货！