如何使用反应类型的 js

React 是一个流行的 JavaScript 库，是构建用户界面的有力工具。React 带来了许多好处，其中包括更好的可读性和可维护性，更好的性能和简单易懂的 API。在本篇文章中，我们将介绍如何使用 React 的基本原理和概念，来构建一个简单的用户界面。

了解 React

React 是用 JavaScript 编写的库，用于构建用户界面。相对于传统的以 HTML 和 CSS 为基础的页面构建方式，React 带来了更好的组件化和复用性。React 组件是一个可以自主管理自己的状态和呈现内容的代码包。这种方式可以使代码更加清晰和具有可维护性。

React 使用的是声明式编程方式，开发者只需要定义组件的状态和呈现内容，而不需要关注具体的实现细节。另外，React 还可以与其他库或框架一起使用，如 Flux、Redux、Angular 等。

安装 React

首先你需要安装 Node.js 和 npm。npm 是 Node.js 的包管理工具，你可以使用它来安装 React。

npm install react react-dom --save

创建一个 React 组件

一个 React 组件可以通过一个函数或一个类来定义。下面我们将使用函数式组件来构建一个简单的 Hello World。

import React from 'react';

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

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

上面代码首先导入了 React 库，然后定义了一个函数式组件 HelloWorld，该组件返回了一个 h1 元素，内容为 'Hello World!'。最后，我们使用 ReactDOM.render 将该组件呈现到网页上。

React 组件的 props 和 state

props 和 state 是 React 组件的两个核心概念。props 是组件的输入，state 是组件的状态。

• props：由父组件传递给子组件的值。在组件中可以通过 this.props 来获取这些值。

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

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

上面代码中，我们将一个字符串作为 props 传递给 Welcome 组件，并在组件中使用了 {props.name} 来渲染内容。

• state：React 组件的状态，一般由组件自己管理。在组件中可以通过 this.state 来获取和设置状态。

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

上面代码中，我们定义了一个类组件 Clock，该组件维护了一个 state 对象，其中包含了当前的日期。在组件挂载后，我们使用 setInterval 函数来每秒更新一次日期，然后调用 setState 来更新状态，并重新渲染组件。

组件的生命周期

React 组件有三个主要的生命周期阶段：挂载、更新和卸载。在生命周期中，组件会依次执行一些函数，以便你可以在这些函数中添加一些逻辑。

• 挂载阶段：在组件首次挂载时调用。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log('constructor()');
  }

  componentDidMount() {
    console.log('componentDidMount()');
  }

  render() {
    console.log('render()');
    return <h1>Hello World!</h1>;
  }
}

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

上面代码中，我们定义了一个类组件 MyComponent，该组件在挂载时会依次执行构造函数、render 函数和 componentDidMount 函数。在 console 中可以看到输出日志。

• 更新阶段：在组件的 props 或 state 更新时调用。

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

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

  componentDidUpdate() {
    console.log('componentDidUpdate()');
  }

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.handleClick}>Click Me</button>
      </div>
    );
  }
}

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

上面代码中，我们定义了一个类组件 MyComponent，该组件维护了一个 count 状态。当用户点击按钮时，我们使用 setState 函数更新状态，触发组件的更新。在 console 中可以看到 componentDidUpdate 函数的调用日志。

• 卸载阶段：在组件卸载时调用。

class MyComponent extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(
      () => console.log('tick'),
      1000
    );
  }

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

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

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

上面代码中，我们定义了一个类组件 MyComponent，在组件挂载时使用 setInterval 函数，触发每秒输出 'tick'。在组件卸载时，使用 clearInterval 函数停止输出。

总结

React 提供了一个强大的用户界面构建工具，可以提高代码的可读性、可维护性和性能。在本篇文章中，我们介绍了 React 的基本概念和使用方法，包括组件、props、state、生命周期等。希望本文对您有所帮助。