【早阅】JavaScript 函数式编程：Lenses_AI阅读总结 — 包阅AI

作者：@francesco agati
原文：https://dev.to/francescoagati/introduction-to-functional-programming-in-javascript-lenses-9-3217

背景

Francesco Agati 最近在 DEV Community 上发表了一篇关于在 JavaScript 中使用 Lenses 进行函数式编程的介绍文章。Lenses 是一种强大的抽象工具，用于访问和更新数据结构中的部分内容，特别适用于处理不可变数据结构。

要点

Lenses 提供了一种优雅且模块化的方式来处理不可变数据结构中的嵌套属性。它们通过 getter 和 setter 函数实现对数据的部分访问和更新，而不会改变原始数据。

分析

1. 基本实现

Lenses 可以通过一个包含 get 和 set 方法的对象来实现。例如：

 const lens = (getter, setter) => ({
   get: (obj) => getter(obj),
   set: (val, obj) => setter(val, obj),
 });

 const prop = (key) => lens(
   (obj) => obj[key],
   (val, obj) => ({ ...obj, [key]: val })
 );

这个实现允许我们创建一个专注于对象特定属性的 lens，并通过 get 和 set 方法访问和更新该属性。

2. 组合 Lenses

Lenses 可以组合使用，以便处理嵌套数据结构。例如：

 const composeLenses = (outerLens, innerLens) => ({
   get: (obj) => innerLens.get(outerLens.get(obj)),
   set: (val, obj) => outerLens.set(innerLens.set(val, outerLens.get(obj)), obj),
 });

这个组合方法允许我们创建一个专注于嵌套属性的 lens，从而简化复杂数据结构的访问和更新。

3. 实际应用

Lenses 在 React 应用中特别有用，尤其是在状态管理方面。例如：

 import React, { useState } from 'react';

 const App = () => {
   const [state, setState] = useState({
     user: {
       name: 'Alice',
       address: {
         city: 'Wonderland',
       },
     },
   });

   const userLens = prop('user');
   const addressLens = prop('address');
   const cityLens = prop('city');

   const userAddressCityLens = composeLenses(userLens, composeLenses(addressLens, cityLens));

   const updateCity = (newCity) => {
     const newState = userAddressCityLens.set(newCity, state);
     setState(newState);
   };

   return (
     <div>
       <p>City: {userAddressCityLens.get(state)}</p>
       <button onClick={() => updateCity('Oz')}>Move to Oz</button>
     </div>
   );
 };

 export default App;

在这个例子中，我们使用 lenses 来模块化地访问和更新嵌套的 city 属性，使状态管理更加可预测和易于维护。

影响

Lenses 的引入对 JavaScript 社区，特别是对函数式编程和 React 开发者产生了积极影响。它们提供了一种更优雅和模块化的方式来处理不可变数据结构，从而提高了代码的可维护性和可读性。此外，Lenses 的组合特性使得处理复杂数据结构变得更加简单和直观。

【图书】前端函数式演进

结论

Lenses 是 JavaScript 中处理不可变数据结构的一种强大工具。它们通过提供一种模块化和可组合的方式来访问和更新数据的部分内容，极大地简化了复杂数据结构的处理。随着函数式编程在 JavaScript 社区中的普及，Lenses 有望成为处理不可变数据的标准工具之一。未来，我们可以期待更多的库和框架集成 Lenses，以进一步推动其在实际应用中的使用。

早阅：了解资讯的一种方式。