函数组件：手把手实现 React

前端

2023-11-04 00:37:15

React 函数组件手写实现指南

摘要

本指南提供了逐步说明，指导您如何从头开始实现 React 函数组件。它涵盖了创建元素、渲染到 DOM 以及处理事件的基本原理。

介绍

React 函数组件是一种声明性组件，它将 JavaScript 函数映射到 React 元素。与类组件不同，函数组件没有状态或生命周期方法，这使得它们更轻量、更易于编写。

实现

1. 创建元素

首先，让我们创建函数组件：

function MyComponent() {
  // 渲染函数组件的内容
}

然后，我们使用 React.createElement() 函数创建一个 React 元素：

const element = React.createElement(MyComponent);

2. 渲染到 DOM

现在，我们需要将元素渲染到 DOM 中。为此，我们使用 ReactDOM.render() 函数：

ReactDOM.render(element, document.getElementById('root'));

3. 处理事件

函数组件可以通过在函数中使用 event 参数来处理事件：

function MyComponent() {
  const handleClick = (event) => {
    // 处理点击事件
  };

  return <button onClick={handleClick}>Click me</button>;
}

示例代码

以下是一个完整的示例，展示了如何实现一个简单的函数组件：

function Greeting(props) {
  const { name } = props;

  const handleClick = (event) => {
    console.log(`Hello, ${name}!`);
  };

  return <button onClick={handleClick}>Say hello</button>;
}

ReactDOM.render(<Greeting name="World" />, document.getElementById('root'));