当前位置：首页 > article >正文

React前端框架

article 2024/10/30 6:31:23

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发和维护。React 采用组件化的开发方式，使得开发者可以构建可复用的 UI 组件，从而提高开发效率和代码的可维护性。

React 的基本概念

组件：React 的核心概念是组件。组件可以是类组件或函数组件。函数组件是推荐的使用方式。
JSX：JSX 是一种语法扩展，允许在 JavaScript 中编写类似 HTML 的代码。它使得编写组件变得更加直观。
状态和属性：状态（state）是组件内部的数据，属性（props）是从父组件传递给子组件的数据。
生命周期：组件的生命周期分为几个阶段，包括挂载（mounting）、更新（updating）和卸载（unmounting）。React 提供了生命周期方法来处理这些阶段。

基本示例

以下是一个简单的 React 组件示例：


import React, { useState } from 'react';

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

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

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

组件的 Props

使用 props 向子组件传递数据：


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

// 使用
<Greeting name="Alice" />

组件的状态

使用 useState 钩子管理组件的状态：


import React, { useState } from 'react';

function Toggle() {
  const [isToggled, setIsToggled] = useState(false);

  return (
    <div>
      <p>The button is {isToggled ? 'ON' : 'OFF'}</p>
      <button onClick={() => setIsToggled(!isToggled)}>
        Toggle
      </button>
    </div>
  );
}

生命周期方法

在类组件中，您可以使用生命周期方法：


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

  componentDidUpdate(prevProps, prevState) {
    console.log('Component updated');
  }

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

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

在函数组件中，使用 useEffect 钩子来处理副作用：


import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log('Component mounted or updated');

    return () => {
      console.log('Component will unmount');
    };
  }, []); // 空数组表示只在组件挂载和卸载时运行

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

条件渲染

在 React 中，可以根据条件渲染不同的组件：


function ConditionalRendering({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
    </div>
  );
}

列表渲染

使用 map 方法渲染列表：


const items = ['Apple', 'Banana', 'Cherry'];

function ItemList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

React Router

使用 React Router 进行路由管理：

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} />
      </Switch>
    </Router>
  );
}