时间戳

首页 > 解决方案 > 如何在 FP 中引用当前状态？

javascript - 如何在 FP 中引用当前状态？

问题描述

我已经问过这个问题，但我的解释很糟糕，所以我决定用更好的解释和实际代码再次提问（我会要求版主删除其中一个帖子）。所以让我们考虑一下这个问题。

以下代码段表示来自数组的渲染注释。但是，在添加注释部分期间，我改变了一个状态。所以问题是：如何在不改变的情况下在notes数组中添加新注释？换句话说，我想删除replaceNotes并保持相同的功能。我知道完全可以添加没有数组的注释，但是由于将来的参考，我确实需要使用注释更新数组。问题是，在我的原始应用程序中，我有带有注释的列表，当我在列表之间切换时，我应该得到依赖于我打开的列表的渲染注释。这就是为什么我应该保留对notes数组的引用。

同时我想知道，如果我只是存储然后从这些数据notes中做笔记，可以吗？localStorage这是函数式编程的好习惯吗？

const button = document.getElementById('button');
const notesContainer = document.querySelector('.notes');

const pipe = (f, g) => (...args) => f(g(...args));

let notes = [];

const createNote = (...fns) => fns.reduceRight(pipe);

const handleEvent = () =>
   createNote(gatherContent, renderContent, replaceNotes)(notes);

function gatherContent(notes) {
   const name = prompt('How do you want to name a note?');

   return [...notes, { name }];
}

function renderContent(notes) {
   function render(note) {
      const noteEl = document.createElement('div');
      noteEl.innerHTML = `<p>${note.name}</p>`;
      notesContainer.append(noteEl);
   }

   notesContainer.innerHTML = '';
   notes.map(render);

   return notes;
}

const replaceNotes = newNotes => (notes = newNotes);

button.addEventListener('click', handleEvent);
<button id="button">Click me!</button>
<section class="notes"></section>

标签： javascriptfunctional-programmingstateimmutabilitymutation

解决方案

以下是如何创建一个简单的任务列表应用程序，而不需要改变除 DOM 之外的任何内容。

const button = document.getElementById("button");
const section = document.getElementById("notes");
const template = document.getElementById("template");

template.parentNode.removeChild(template);

const render = notes => {
    button.onclick = event => {
        const name = prompt("How do you want to name a note?");
        render([...notes, { name }]);
    };

    while (section.lastChild) {
        section.removeChild(section.lastChild);
    }

    for (const note of notes) {
        const node = template.cloneNode(true);
        node.firstChild.firstChild.nodeValue = note.name;
        section.appendChild(node);
    }
};

render([]);
<button id="button">Click me!</button>
<section id="notes"></section>
<div id="template"><p>name</p></div>

有关详细说明，请阅读我之前的答案。https://stackoverflow.com/a/58642199/783743

您也可以使用此模式localStorage。

const button = document.getElementById("button");
const section = document.getElementById("notes");
const template = document.getElementById("template");

template.parentNode.removeChild(template);

const render = notes => {
    localStorage.setItem("notes", notes); // set notes

    button.onclick = event => {
        const name = prompt("How do you want to name a note?");
        render([...notes, { name }]);
    };

    while (section.lastChild) {
        section.removeChild(section.lastChild);
    }

    for (const note of notes) {
        const node = template.cloneNode(true);
        node.firstChild.firstChild.nodeValue = note.name;
        section.appendChild(node);
    }
};

render(localStorage.getItem("notes") || []); // get notes

请注意，它localStorage只能用于保存要跨会话使用的状态。不建议localStorage用作您的应用商店。这将导致糟糕的性能和糟糕的代码结构。

推荐阅读