引言
React作为当今最流行的前端框架之一，其函数组件因其简洁性和灵活性而受到开发者的青睐。本文将带你从入门到精通，全面了解React函数组件，帮助你轻松构建高效的前端应用。
React函数组件概述
1. 什么是React函数组件？
React函数组件是一种使用JavaScript函数创建的组件。它允许你使用JavaScript函数来编写UI，这使得组件的创建和渲染更加简洁。
2. 函数组件的优势
简洁：使用函数定义组件，代码更易读、易维护。
性能：React会优化函数组件的渲染性能。
React函数组件基础
1. 函数组件的结构
function MyComponent(props) {
return

;
}
2. 传递props

3. 使用内联样式
function MyComponent() {
return

;
}
4. 使用CSS类
function MyComponent() {
return

;
}
React函数组件进阶
1. 使用Hooks
Hooks是React 16.8引入的新特性，允许你在函数组件中使用状态和生命周期特性。
useState Hook
import React, { useState } from ‘react’;

function MyComponent() {
const [count, setCount] = useState(0);

return (

);
}
useEffect Hook
import React, { useEffect, useState } from ‘react’;

function MyComponent() {
const [count, setCount] = useState(0);

useEffect(() => {
document.title = `You clicked ${count} times`;
});

return (

);
}
2. 高阶组件（HOC）
高阶组件是一个接受组件并返回一个新的组件的函数。
function withCount(WrappedComponent) {
return function WithCount(props) {
const count = props.count;

return ;
};
}

function MyComponent(props) {
return

{props.count}

;
}

export default withCount(MyComponent);
实战案例：构建TodoList应用
1. 初始化项目
npx create-react-app todo-list
cd todo-list
2. 创建组件
// src/App.js
import React, { useState } from ‘react’;
import TodoList from ‘./TodoList’;

function App() {
const [todos, setTodos] = useState([]);

const addTodo = (text) => {
setTodos([…todos, { id: todos.length, text }]);
};

return (

);
}

export default App;
// src/TodoList.js
import React from ‘react’;

function TodoList({ todos, addTodo }) {
return (

);
}

export default TodoList;
3. 运行应用
npm start
总结
通过本文的学习，相信你已经对React函数组件有了全面的认识。希望你能将这些知识应用到实际项目中，构建出高效、美观的前端应用。