本文介绍了React18入门的基础知识,包括安装和配置开发环境、创建第一个React应用、以及JSX语法和组件的使用。文章还详细讲解了状态管理、组件生命周期以及路由与导航的相关知识。此外,文中提供了常见问题的解决方案和调试技巧,帮助开发者更好地理解React18入门。
React 18 引入了许多重要的新特性和改进,主要包括:
安装并配置开发环境主要包括以下几个步骤:
create-react-app
,以生成新的React应用。.env
文件,并在其中设置环境变量,例如:REACT_APP_API_URL=https://api.example.com
create-react-app
已经预先配置好它们,不需要额外配置。要在本地环境中创建并运行React应用,首先需要安装Node.js和npm。之后,使用create-react-app
工具生成React应用:
create-react-app
:npx create-react-app my-app
cd my-app
npm start
这时,你可以在浏览器中访问 http://localhost:3000
查看应用。
JSX 是一种类似于 XML 的语法扩展,专为React设计。它允许你在JS代码中直接编写HTML标签,同时支持JS表达式。
function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
function Button(props) { return <button onClick={() => props.onClick()}>Click me</button>; }
function App() { return ( <div> <Header /> <MainContent /> <Footer /> </div> ); }
React组件是一个函数或类,用于生成DOM元素。组件可以接收输入(即属性),并返回React元素来描述应该在屏幕上看到的内容。
function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }
function Heading() { return ( <div> <h1>React 18教程</h1> <p>欢迎来到React的世界!</p> </div> ); }
function UserList(props) { const users = props.users; return ( <ul> {users.map(user => ( <li key={user.id}>{user.name}</li> ))} </ul> ); }
状态(State)是组件中存储的可变数据,用于控制组件的行为。通过改变状态,组件可以更新自身。
class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return <h1>{this.state.count}</h1>; } }
class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } increment() { this.setState({ count: this.state.count + 1 }); } render() { return ( <div> <h1>{this.state.count}</h1> <button onClick={() => this.increment()}>Increment</button> </div> ); } }
React组件的生命周期分为三个阶段:Mounting,Updating,Unmounting。
componentWillMount()
:生命周期方法,仅在组件即将挂载时调用,现已废弃。componentDidMount()
:生命周期方法,仅在组件挂载后调用。class Lifecycle extends React.Component { componentDidMount() { console.log('Component did mount'); } render() { return <div>Component Lifecycle</div>; } }
componentWillUpdate()
:生命周期方法,仅在组件即将更新时调用,现已废弃。componentDidUpdate()
:生命周期方法,仅在组件更新后调用。class Lifecycle extends React.Component { componentDidUpdate(prevProps, prevState) { console.log('Component did update'); } render() { return <div>Component Lifecycle</div>; } }
componentWillUnmount()
:生命周期方法,仅在组件即将卸载时调用。class Lifecycle extends React.Component { componentWillUnmount() { console.log('Component will unmount'); } render() { return <div>Component Lifecycle</div>; } }
更新组件状态通常通过setState
函数实现。
class Button extends React.Component { handleClick() { console.log('Button clicked'); } render() { return <button onClick={() => this.handleClick()}>Click me</button>; } }
class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } increment() { this.setState({ count: this.state.count + 1 }); } render() { return ( <div> <h1>{this.state.count}</h1> <button onClick={() => this.increment()}>Increment</button> </div> ); } }
React Router是React应用中常用的路由库,它提供了丰富的功能,如URL路由、页面导航、代码分割等。
npm install react-router-dom
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; function App() { return ( <Router> <Switch> <Route path="/" exact component={Home} /> <Route path="/about" component={About} /> <Route path="/users/:id" component={User} /> </Switch> </Router> ); }
function Home() { return <h2>Home</h2>; } function About() { return <h2>About</h2>; } function User({ match }) { return <h2>User: {match.params.id}</h2>; }
import { Link } from 'react-router-dom'; function Nav() { return ( <nav> <Link to="/">Home</Link> <Link to="/about">About</Link> </nav> ); }
<Route path="/users/:id" component={User} />
function User({ match }) { const id = match.params.id; return <h2>User: {id}</h2>; }
setState
更新状态。useState
,在类组件中使用this.setState
。Chrome开发者工具提供了丰富的功能,帮助开发人员调试React应用。
打开开发者工具:
Ctrl+Shift+I
(Windows/Linux)或 Cmd+Opt+I
(Mac)打开开发者工具。React DevTools:
console.log
、console.error
等方法可以在控制台中输出信息,帮助调试。性能优化:
React.memo
和useMemo
减少不必要的渲染。import()
)进行代码分割,减少初始加载时间。lazy
功能,延迟加载不常用的组件。useEffect
处理副作用,避免在render方法中执行副作用代码。假设我们要构建一个简单的待办事项应用,包含以下功能:
mkdir todo-app cd todo-app npx create-react-app . npm start
function Todo({ id, text, onDelete, onEdit }) { return ( <li> <span>{text}</span> <button onClick={() => onDelete(id)}>Delete</button> <button onClick={() => onEdit(id)}>Edit</button> </li> ); }
import React, { useState, useEffect } from 'react'; function TodoList() { const [todos, setTodos] = useState([]); const [inputText, setInputText] = useState(''); useEffect(() => { // 模拟从服务器获取数据 fetch('/api/todos') .then((response) => response.json()) .then((data) => setTodos(data)); }, []); const handleAddTodo = () => { setTodos([...todos, { id: todos.length + 1, text: inputText }]); setInputText(''); }; const handleDeleteTodo = (id) => { setTodos(todos.filter((todo) => todo.id !== id)); }; const handleEditTodo = (id) => { console.log('Editing todo with id:', id); // 编辑逻辑 }; return ( <div> <input type="text" value={inputText} onChange={(e) => setInputText(e.target.value)} /> <button onClick={handleAddTodo}>Add</button> <ul> {todos.map((todo) => ( <Todo key={todo.id} id={todo.id} text={todo.text} onDelete={handleDeleteTodo} onEdit={handleEditTodo} /> ))} </ul> </div> ); }
import React from 'react'; import TodoList from './TodoList'; function App() { return ( <div> <h1>Todo App</h1> <TodoList /> </div> ); } export default App;
npm start
npm run build
npm install -g serve serve -s build
build
)部署到托管服务,如GitHub Pages、Netlify等。npx netlify deploy --dir build
通过以上步骤,你已经成功构建了一个简单的待办事项应用,并将其部署到网络上。