PureScript 与 Preact：实现待办事项列表的函数组件入门
PureScript 是一种函数式编程语言，它基于 Haskell，旨在提供一种简洁、高效且易于维护的编程方式。Preact 是一个轻量级的 React 实现，它专注于性能和易用性。本文将带你通过 PureScript 和 Preact，使用函数组件的方式实现一个待办事项列表（To-Do List）。
准备工作
在开始之前，请确保你已经安装了 Node.js 和 npm。然后，你可以使用以下命令来创建一个新的 PureScript 项目：
bash
npx psc-package create my-todo-app
cd my-todo-app
接下来，安装 Preact 和其他必要的依赖：
bash
npm install preact preact-hooks
创建待办事项列表组件
1. 定义数据结构
我们需要定义待办事项的数据结构。在 PureScript 中，我们可以使用类型别名来定义：
purs
-- src/Types.purs
module Types where
type Todo =
{ id :: Int
, text :: String
, completed :: Boolean
}
2. 创建函数组件
接下来，我们将创建一个函数组件来展示待办事项列表。这个组件将接受一个待办事项列表作为属性，并渲染它们。
purs
-- src/TodoList.purs
module TodoList where
import React (ReactElement, fragment, createElement)
import Preact as P
import Types (Todo)
todoList :: Array Todo -> ReactElement
todoList todos =
fragment
[ P.div_
[ P.h2_ "To-Do List"
, P.ul_
[ map todoItem todos
]
]
]
todoItem :: Todo -> ReactElement
todoItem todo =
P.li_
[ P.div_
[ P.input
{ type: "checkbox"
, checked: todo.completed
, onChange: (_ -> unit)
}
, P.span_ [ P.text todo.text ]
]
]
3. 处理用户交互
为了使待办事项列表更加实用，我们需要添加添加和删除待办事项的功能。我们可以创建一个状态来存储待办事项列表，并定义相应的函数来更新这个状态。
purs
-- src/TodoList.purs
module TodoList where
-- ... (省略之前的代码)
type State =
{ todos :: Array Todo
, nextId :: Int
}
initialState :: State
initialState =
{ todos: []
, nextId: 0
}
-- ... (省略之前的 todoList 和 todoItem 函数)
handleAddTodo :: String -> State -> State
handleAddTodo text state =
let
newTodo =
{ id: state.nextId
, text: text
, completed: false
}
in
{ ...state
, todos: state.todos [ newTodo ]
, nextId: state.nextId + 1
}
handleRemoveTodo :: Int -> State -> State
handleRemoveTodo id state =
let
filteredTodos = filter (todo -> todo.id /= id) state.todos
in
{ ...state
, todos: filteredTodos
}
-- ... (省略之前的 todoList 函数)
todoList :: State -> ReactElement
todoList state =
fragment
[ P.div_
[ P.h2_ "To-Do List"
, P.input
{ type: "text"
, placeholder: "Add a new todo..."
, onKeyPress: (e -> if e.key == "Enter" then handleAddTodo e.target.value state else unit)
}
, P.ul_
[ map todoItem state.todos
]
, P.button_
[ P.text "Clear Completed"
, P.on "click" (_ -> handleRemoveTodo (-1) state)
]
]
]
4. 运行应用程序
现在，我们已经创建了一个基本的待办事项列表组件。要运行应用程序，请使用以下命令：
bash
npx psc-package run
这将启动一个本地服务器，并在浏览器中打开你的待办事项列表应用程序。
总结
通过本文，我们学习了如何使用 PureScript 和 Preact 创建一个待办事项列表组件。我们定义了数据结构，创建了一个函数组件，并处理了用户交互。这个例子展示了 PureScript 和 Preact 的强大功能，以及它们在构建现代前端应用程序中的潜力。
请注意，本文只是一个入门指南，还有很多高级功能和优化可以探索。希望这篇文章能够激发你对 PureScript 和 Preact 的兴趣，并鼓励你进一步学习和实践。
Comments NOTHING