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

引言

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

useState使用技巧

1. 函数式初始化状态

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

javascript 复制代码

// 不推荐 - 每次渲染都会执行
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. 批量状态更新

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

javascript 复制代码

// 不推荐 - 可能基于旧状态
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更合适。

javascript 复制代码

// 使用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. 正确处理依赖数组

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

javascript 复制代码

// 不推荐 - 缺少依赖
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中，提高代码可读性。

javascript 复制代码

// 不推荐 - 所有副作用混在一起
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中，提高复用性。

javascript 复制代码

// 封装数据获取逻辑
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的约定。

javascript 复制代码

// 好的自定义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，简化表单处理。

javascript 复制代码

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。

javascript 复制代码

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避免重复计算。

javascript 复制代码

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缓存函数

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

javascript 复制代码

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可以保存不会触发重新渲染的可变值。

javascript 复制代码

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必须在组件的顶层调用，不能在条件、循环或嵌套函数中使用。

javascript 复制代码

// 不推荐 - 在条件中使用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. 依赖数组中的对象引用问题

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

javascript 复制代码

// 不推荐 - 对象引用每次都不同
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函数。

javascript 复制代码

// 不推荐 - 直接使用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可以构建出复杂而优雅的组件逻辑。

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

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

目录

引言

useState使用技巧

1. 函数式初始化状态

2. 批量状态更新

3. 使用useReducer管理复杂状态

useEffect最佳实践

1. 正确处理依赖数组

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

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

自定义Hooks开发

1. 遵循命名规范

2. 封装表单处理逻辑

3. 封装窗口尺寸监听

性能优化Hooks

1. 使用useMemo缓存计算结果

2. 使用useCallback缓存函数

3. 使用useRef保存可变值

常见陷阱与解决方案

1. 在条件语句中使用Hooks

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

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

总结

1. 状态管理

2. 副作用处理

3. 自定义Hooks

4. 性能优化

5. 避免陷阱