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

Question

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

以下代码片段表示从数组渲染注释。然而，在添加注释部分，我改变了一个状态。所以问题是:如何在 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>

Answer 1

以下是如何创建一个简单的任务列表应用程序，而不需要改变除 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 只能用于保存您想要跨 session 使用的状态。不建议使用 localStorage 作为您的应用程序商店。这会导致糟糕的性能和糟糕的代码结构。