React入门需要知道的几个知识点及代码示例

原创

小焱

发布于 2025-09-13 08:40:17

1090

文章被收录于专栏：前端开发前端开发

React 是一个用于构建用户界面的 JavaScript 库，入门简单但有几个几个核心概念需要掌握。以下是 React 入门必须了解的几个知识点及代码示例：

1. 组件 (Components)

组件是 React 应用的基本 building block，可理解为可重用的 UI 片段。有两种形式：函数组件和类组件（现在推荐函数组件）。

// 函数组件示例：一个简单的问候组件
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 使用组件
function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

2. JSX 语法

JSX 是 JavaScript 的扩展语法，看起来像 HTML，但实际上会被编译为 JavaScript。它允许在 JavaScript 中编写 UI。

// JSX 示例
function UserProfile() {
  const user = {
    name: "John Doe",
    age: 30,
    isPremium: true
  };
  
  // 在 JSX 中使用表达式（用 {} 包裹）
  return (
    <div className="profile">  {/* 注意是 className 不是 class */}
      <h2>{user.name}</h2>
      <p>Age: {user.age}</p>
      {user.isPremium && <p>Premium Member</p>}  {/* 条件渲染 */}
    </div>
  );
}

3. Props（属性）

Props 是从父组件传递到子组件的数据，类似函数参数，只读不能修改。

// 子组件接收 props
function Product(props) {
  return (
    <div className="product">
      <h3>{props.name}</h3>
      <p>Price: ${props.price}</p>
      <button onClick={props.onAddToCart}>Add to Cart</button>
    </div>
  );
}

// 父组件传递 props
function Shop() {
  const handleAddToCart = (productName) => {
    alert(`Added ${productName} to cart`);
  };
  
  return (
    <div>
      <Product 
        name="Laptop" 
        price={999} 
        onAddToCart={() => handleAddToCart("Laptop")} 
      />
      <Product 
        name="Phone" 
        price={699} 
        onAddToCart={() => handleAddToCart("Phone")} 
      />
    </div>
  );
}

4. State（状态）

State 是组件内部管理的数据，当 state 变化时，组件会重新渲染。使用 useState 钩子管理。

5. 事件处理

React 事件处理与 DOM 事件类似，但语法略有不同（驼峰命名法，传递函数而非字符串）。

function ButtonExample() {
  const handleClick = () => {
    alert('Button clicked!');
  };
  
  const handleInputChange = (e) => {
    console.log('Input value:', e.target.value);
  };
  
  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <input 
        type="text" 
        placeholder="Type something" 
        onChange={handleInputChange} 
      />
    </div>
  );
}

6. 生命周期与 useEffect

useEffect 钩子用于处理组件的副作用（如数据获取、订阅等），相当于类组件的生命周期方法。

7. 列表渲染

使用 map() 方法渲染列表，记得给每个项添加唯一的 key 属性。

function TodoList() {
  const todos = [
    { id: 1, text: 'Learn React' },
    { id: 2, text: 'Build an app' },
    { id: 3, text: 'Deploy' }
  ];
  
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

掌握这些基础知识后，你就可以开始构建简单的 React 应用了。建议通过实际项目练习，比如制作一个待办事项应用（Todo App），逐步加深对这些概念的理解。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

react

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

react

#React

登录后参与评论

0 条评论

热度