React 核心语法

一、项目搭建

1. 创建项目

引入核心文件
React 是一个用于构建用户界面的 JavaScript 库。它通过组件化的方式让前端开发变得更加模块化和高效。
使用脚手架（更常用）
1. 打开终端
2. 输入 npx create-react-app 项目名 创建 React 项目
3. 使用 cd 项目名 进入项目目录
4. 输入 npm start 启动项目
这会自动创建一个完整的 React 开发环境，并启动一个开发服务器。默认情况下，项目会运行在 http://localhost:3000。
```
npx create-react-app my-app
cd my-app
npm start
```

2. 打开项目

文件入口 index.js

这是 React 项目的入口文件。React 使用 ReactDOM.createRoot() 来创建渲染实例，并通过 render() 方法将根组件渲染到页面上。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

createRoot() 创建根实例
render() 渲染组件

根组件 App.js

React 组件有两种方式创建：函数组件 和 类组件。推荐使用函数组件，因为它更加简洁和易于理解。

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

3. JSX 语法

JSX（JavaScript XML）是 React 推荐的语法扩展，它让 JavaScript 和 HTML 语法紧密结合，允许我们在 JavaScript 代码中直接书写 HTML 结构。

JSX 中，所有的标签必须有一个根元素。如果需要返回多个元素，可以使用空标签（<> </>）或 div 包裹它们。
```
function App() {
  return (
    <>
      <h1>Hello, React!</h1>
      <p>This is JSX.</p>
    </>
  );
}
```

插值：JSX 中插入 JavaScript 表达式时，需要使用大括号 {} 来包裹。

function App() {
  const name = "React";
  return (
    <div>
      <h1>Hello, {name}!</h1>
    </div>
  );
}

条件渲染：React 提供了简单的条件渲染方法。你可以在 JSX 中使用三元运算符或逻辑运算符来渲染不同的内容。

function App() {
  const isLoggedIn = true;
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in</h1>}
    </div>
  );
}

二、组件的使用

1. 函数组件

函数组件是最常用的 React 组件类型。它通过一个返回 JSX 元素的函数来定义 UI。

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return (
    <div>
      <Greeting name="React" />
      <Greeting name="JavaScript" />
    </div>
  );
}

2. 类组件

类组件是 React 的传统组件形式，使用 class 关键字定义，并继承自 React.Component 类。

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

class App extends Component {
  render() {
    return (
      <div>
        <Greeting name="React" />
        <Greeting name="JavaScript" />
      </div>
    );
  }
}

类组件和函数组件的区别：

类组件有生命周期方法和 state（状态），适用于需要复杂逻辑的组件。
函数组件更加简洁，并且通过 useState 和 useEffect 等 Hook 使其也能拥有状态和生命周期。

3. 组件传值

React 组件之间的通信通常通过 props 来完成。父组件可以通过 props 向子组件传递数据。

function Welcome(props) {
  return <h1>Welcome, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="John" />
    </div>
  );
}

4. 事件处理

在 React 中，事件名称是驼峰式命名，且事件处理函数通常是一个方法。

function App() {
  const handleClick = () => {
    alert('Button clicked!');
  };

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

5. 状态管理 (State)

组件的状态（state）用于保存和管理组件内部的数据。通过 useState Hook 可以在函数组件中使用状态。

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

useState 返回一个数组，第一个元素是当前的状态值，第二个元素是更新状态的函数。

三、React 生命周期

React 组件有生命周期，指组件从创建、更新到销毁的整个过程。类组件中生命周期方法较多，函数组件则通过 useEffect Hook 来模拟生命周期。

1. 类组件生命周期

常用的生命周期方法：

componentDidMount：组件挂载完成后调用。
componentDidUpdate：组件更新后调用。
componentWillUnmount：组件销毁前调用。

class MyComponent extends React.Component {
  componentDidMount() {
    console.log('Component did mount');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return <div>Hello, React!</div>;
  }
}

2. 函数组件生命周期（`useEffect`）

在函数组件中，可以通过 useEffect 来模拟生命周期方法。

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log('Component did mount');

    return () => {
      console.log('Component will unmount');
    };
  }, []); // 空数组意味着只在挂载和卸载时执行

  return <div>Hello, React!</div>;
}

四、常用 Hook

1. `useState`

用于在函数组件中添加状态。

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

2. `useEffect`

用于执行副作用操作，例如数据获取、DOM 操作、订阅等。

useEffect(() => {
  // 执行副作用
  console.log('Component mounted');
  
  return () => {
    // 清理副作用
    console.log('Component unmounted');
  };
}, []);  // 空数组表示仅在组件挂载和卸载时执行

3. `useContext`

用于跨组件共享状态，可以避免多层传递 props。

const UserContext = React.createContext();

function App() {
  return (
    <UserContext.Provider value={{ name: 'John' }}>
      <Profile />
    </UserContext.Provider>
  );
}

function Profile() {
  const user = useContext(UserContext);
  return <h1>{user.name}</h1>;
}

五、总结

React 是一个灵活且强大的库，它使用组件化的开发方式，能够帮助开发者高效地构建动态用户界面。掌握 React 的核心语法和组件生命周期，能够帮助开发者更好地理解和使用 React 来构建应用。在开发过程中，我们常常会遇到以下几个重要概念：

组件（函数组件、类组件）
JSX 语法
Props 和 State
事件处理
生命周期管理
Hooks：useState, useEffect, useContext 等

希望这篇笔记能帮助你快速上手 React，并顺利构建出自己的 React 应用！

React 核心语法 | 豆包MarsCode AI刷题