tech-blog/article/react-component-development

React 组件开发指南

React 是一个用于构建用户界面的 JavaScript 库，它允许开发者以声明式的方式构建组件化的 UI。本文将介绍 React 组件开发的基本概念和最佳实践。

组件类型

在 React 中，组件主要分为以下两种类型：

函数组件：使用 JavaScript 函数创建，是最简单的组件类型。
类组件：使用 ES6 类创建，提供了更多高级功能，如状态管理和生命周期方法。

函数组件

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

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

ReactDOM.render(<Greeting name="Alice" />, document.getElementById('root'));

类组件

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

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

ReactDOM.render(<Greeting name="Bob" />, document.getElementById('root'));

状态管理

React 组件可以通过 setState 方法来管理状态。以下是一个使用状态的示例：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(<Clock />, document.getElementById('root'));

路由

React Router 是一个用于在 React 应用中处理路由的库。以下是一个简单的路由示例：

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        {/* Show the current <Route> in the <Switch>. */}
        <Switch>
          <Route path="/about">
            {() => <About />}
          </Route>
          <Route path="/">
            {() => <Home />}
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

更多关于 React 路由的信息，请访问React Router 官方文档。

以上就是 React 组件开发的基本介绍。希望对您有所帮助！

如果您对 React 的其他方面感兴趣，可以阅读以下文章：