React 构造 - Javascript

React 是一个流行的 JavaScript 库，用于构建用户界面。React 通过使用组件来构建复杂的 UI，让开发者可以轻松管理和维护应用。

组件

组件是 React 的核心概念。组件是一种将 UI 拆分成独立重复使用的部分的方法。每个组件都包含自己的状态和生命周期方法，可以根据需要更新和渲染。

函数组件

函数组件是一种定义无状态组件的方法。以下是一个简单的函数组件。

function App() {
  return <h1>Hello World</h1>;
}

类组件

类组件是一种定义有状态组件的方法。以下是一个简单的类组件。

class App extends React.Component {
  render() {
    return <h1>Hello World</h1>;
  }
}

JSX

JSX 是一种 JavaScript 的语法扩展，可用于描述组件的结构。JSX 的语法类似于 HTML，但实际上是 JavaScript 的语法扩展。以下是一个简单的 JSX 组件。

function App() {
  return <h1>Hello World</h1>;
}

Props

Props 是一种在组件之间传递数据的方法。通过 props，我们可以将数据从一个组件传递到另一个组件。以下是一个使用 props 的例子。

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

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

State

State 是一种用于在组件中存储和管理数据的方法。通过 state，我们可以在组件中保存和修改数据，并在需要时更新页面。以下是一个使用 state 的例子。

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

function App() {
  return <Counter />;
}

生命周期

生命周期是描述组件在不同时间点执行的方法。React 组件的生命周期分为三个阶段：挂载，更新和卸载。以下是一个使用生命周期的例子。

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

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

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

  tick() {
    this.setState({ seconds: this.state.seconds + 1 });
  }

  render() {
    return <div>Seconds: {this.state.seconds}</div>;
  }
}

function App() {
  return <Timer />;
}

以上就是 React 构造 - JavaScript 的介绍。通过组件，JSX，props，state 和生命周期，React 简化了构建复杂 UI 的过程。