React 组件 - Javascript

React 组件是构建 React 应用程序的基本单元。组件是 JavaScript 函数或类，它们定义了应用程序中的视图和行为。组件使应用程序易于维护和调试，并允许开发人员将应用程序拆分成多个相对独立的部分。

创建组件

在 React 中，创建组件有两种方法，一种是函数式组件，另一种是类组件。

函数式组件：

import React from 'react';

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

export default Welcome;

类组件：

import React from 'react';

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

export default Welcome;

渲染组件

使用 JSX 将组件渲染到页面上。

import React from 'react';
import ReactDOM from 'react-dom';
import Welcome from './Welcome';

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

Props

Props 是从父组件传递给子组件的属性，它们是只读的。在组件内，可以通过 this.props 来访问它们。

import React from 'react';

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

export default Welcome;

父组件：

import React from 'react';
import ReactDOM from 'react-dom';
import Welcome from './Welcome';

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

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

State

State 是组件的私有状态，它在组件内部定义和管理，并可以通过 this.state 访问。当状态发生变化时，组件会重新渲染。

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState((state) => ({ count: state.count + 1 }));
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

export default Counter;

生命周期

React 组件有许多生命周期方法，它们在组件的不同阶段被调用。一些常见的生命周期方法包括：componentDidMount 和 componentWillUnmount。

import React from 'react';

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>
    );
  }
}

export default Clock;

事件处理

React 中的事件处理与原生 JavaScript 中的事件处理非常相似，只是使用了不同的语法。

import React from 'react';

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isToggleOn: true };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState((state) => ({ isToggleOn: !state.isToggleOn }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

export default Toggle;

总结

React 组件是构建 React 应用程序的基本单元，它们定义了应用程序中的视图和行为。组件使应用程序易于维护和调试，并允许开发人员将应用程序拆分成多个相对独立的部分。创建组件有两种方法，一种是函数式组件，另一种是类组件。Props 是从父组件传递给子组件的属性，它们是只读的。State 是组件的私有状态，它在组件内部定义和管理，并可以通过 this.state 访问。React 组件有许多生命周期方法，它们在组件的不同阶段被调用。事件处理与原生 JavaScript 中的事件处理非常相似，只是使用了不同的语法。