LvHeng

Appearance

React 函数式编程的要点

发布于 2024-10-17

React 函数式编程的核心理念 ​

在使用 React 进行函数式编程时，有几个关键点需要牢记：

  1. 关注依赖关系，而非执行顺序：函数式编程更注重组件和函数之间的依赖关系，而不是代码的执行顺序。
  2. 隔离副作用：函数式编程的目标是将副作用（如数据获取、DOM 操作等）限制在小范围内，防止它们影响整体程序的纯度。
  3. 保持纯函数：在 React 应用中，除了 useEffect 钩子内的代码，其他部分应该尽量保持纯函数的特性。这意味着给定相同的输入，总是产生相同的输出，且不产生副作用。

实践示例 ​

假设我们需要根据不同用户返回不同的 id ，一个好的做法是使用自定义 Hook：

js
const { user } = useUser(id);

请问 useUser 怎么实现？

js
const useUser = (id) => {
  const [user, setUser] = useState(userCache[id])
  useEffect(()=>{
    if (stale) {
      ajax("/api/user").then(data => userCache[id] = data.user, setUser(data.user))
    } else {
      // do nothing
    }
  }, [id])
  return [user, setUser]
}

这种方式将数据获取的逻辑封装在 useUser Hook 中，保持了组件代码的简洁和纯度。

避免直接使用 useEffect ​

在组件中直接使用 useEffect 可能导致纯代码和不纯代码混合，影响代码的可维护性。相反，我们应该：

  • 将 useEffect 逻辑封装在自定义 Hook 中。
  • 使用像 SWR 或 React Query 这样的数据获取库，它们内部已经处理了副作用。

React 开发者技能评估 ​

在面试 React 开发者时，询问他们如何获取数据可以很好地评估其技能水平：

  1. 无法回答：可能对 React 不太熟悉。
  2. 使用 useState 和 useEffect：基本了解 React，但经验有限。
  3. 封装自定义 Hook：有实际项目经验。
  4. 使用 SWR 或 React Query：了解现代 React 开发最佳实践。
  5. 了解 use Hook 和 Suspense：对 React 新特性有深入理解，经验丰富。

结论 ​

React 函数式编程强调代码的纯度、可预测性和可维护性。通过正确使用 Hooks、自定义 Hook 和现代数据获取库，我们可以编写出更加清晰、高效的 React 应用。