来点不一样的，用 ReScript + React 来打造一个 Todo List

前端

2023-12-19 06:15:32

前言

前端技术的浪潮奔腾不息，新技术层出不穷，令前端开发人员应接不暇。TypeScript 作为时下流行的语言，为何笔者还要另辟蹊径，学习一门与之类似的新语言——ReScript？难道 TypeScript 已经穷途末路了吗？

ReScript 的吸引力

ReScript 是一款基于 OCaml 的函数式编程语言，专为构建健壮且可维护的前端应用而设计。它将函数式编程的优雅与 React 的强大相结合，提供了一种独特而高效的开发体验。

与 TypeScript 相比，ReScript 拥有以下优势：

类型安全： ReScript 采用类型系统，可以在编译时捕获类型错误，从而提升代码质量和可靠性。
函数式编程： ReScript 遵循函数式编程范式，鼓励编写可重用、可组合的代码，降低复杂性。
高效性能： ReScript 代码会被编译成高效的 JavaScript，在运行时展现出色的性能。

实践：使用 ReScript + React 构建 Todo List

为了充分领略 ReScript 的魅力，我们不妨动手构建一个简单的 Todo List 应用。

1. 安装

首先，我们需要安装 ReScript 和 React：

npm install rescript react react-dom

2. 创建项目

新建一个项目目录，并使用 ReScript CLI 初始化项目：

rescript init my-todo-list

3. 编写组件

在 src 目录下创建 Todo.res 文件，编写 Todo 组件：

open React

let Todo = React.component {
  state = {
    completed: false;
  };

  render = _ =>
    React.el("li",
      [
        React.el("input", {
          type: "checkbox",
          checked: state.completed,
          onChange: (event: React.Dom.Event) =>
            setState(prevState => {
              { completed: !prevState.completed }
            })
        }),
        React.text(" "),
        React.text(state.completed ? "(已完成)" : "(未完成)"),
      ]
    );
};

4. 编写应用

在 App.res 中编写应用的主体部分：

open React

let App = React.component {
  state = {
    todos: [],
  };

  render = _ =>
    React.el("div",
      [
        React.el("h1", { text: "Todo List" }),
        React.el("input", {
          type: "text",
          onKeyDown: (event: React.Dom.Event) =>
            if event.key == "Enter" then
              setState(prevState => {
                { todos: prevState.todos ++ [""] }
              })
            else
              unit
        }),
        React.map(state.todos, (todo, i) =>
          React.el(Todo, { key: i, completed: todo.completed })
        )
      ]
    );
};