掌握 React 基础：从 Preact 入手

2023-11-26 17:19:50

React 的浩瀚代码库和 Fiber 架构的复杂性可能会让初学者感到难以捉摸。为了重拾信心，不妨从 React 的轻量级替代品 Preact 入手。在本文中，我们将探索 Preact 的基础知识，为初学者提供一个更易于理解的起点。

Preact：React 的轻量级伙伴

Preact 是 React 的一个紧凑版本，仅为 React 大小的一小部分。它保留了 React 的核心概念，如组件和 hooks，使其成为学习 React 基础的理想平台。

组件：构建 UI 的基石

组件是 React 和 Preact 中 UI 的基本构建模块。它们是可重用的代码片段，封装了特定功能和 UI 元素。在 Preact 中，组件使用 function 或 class 创建。

// 函数组件
const Button = (props) => <button>{props.text}</button>;

// 类组件
class Input extends React.Component {
  render() {
    return <input value={this.props.value} onChange={this.props.onChange} />;
  }
}

Hooks：简化组件状态管理

Hooks 是 React 16 中引入的一个强大功能，它允许我们在组件中使用状态和生命周期方法，而无需使用类组件。Preact 也支持 hooks，让初学者可以轻松地管理组件状态。

import { useState } from 'preact/hooks';

const App = () => {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
};