React系列：使用 React，并创建一个简单的计数器应用程序

知识浅谈

发布于 2023-12-18 12:27:32

2520

发布于 2023-12-18 12:27:32

文章被收录于专栏：分享学习

🍁 作者：知识浅谈，CSDN签约讲师，CSDN博客专家，华为云云享专家，阿里云专家博主 📌 擅长领域：全栈工程师、爬虫、ACM算法 💒 公众号：知识浅谈 🔥网站：vip.zsqt.cc

React 是一个由 Facebook 开发的 JavaScript 库，用于构建用户界面。它是一个快速、灵活且易于使用的工具，因此成为了开发人员的首选。在本文中，我们将介绍 React 的基本概念和使用方法。

🎈 创建 React 应用

首先，我们需要安装 Node.js 和 npm 包管理器。安装完成后，我们可以使用以下命令创建一个新的 React 应用程序：

bash
npx create-react-app my-app
cd my-app
npm start

这将创建一个名为 my-app 的新目录，并在其中初始化一个新的 React 应用程序。运行 npm start 命令启动开发服务器，并在浏览器中打开应用程序。

编写 React 组件 React 应用程序由组件组成。组件是独立的代码单元，它们具有自己的状态和生命周期方法。我们可以使用 class 或 function 语法定义组件。

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

import React from 'react';

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

  handleClick() {
    this.setState({ counter: this.state.counter + 1 });
  }

  render() {
    return (
      <div>
        <h1>My Counter App</h1>
        <p>Counter: {this.state.counter}</p>
        <button onClick={() => this.handleClick()}>Click Me</button>
      </div>
    );
  }
}

export default App;

在这个例子中，我们定义了一个名为 App 的类组件。它有一个名为 counter 的状态变量和一个 handleClick 方法，用于增加计数器的值。在 render 方法中，我们将组件的标题、计数器和一个按钮渲染到屏幕上。

渲染 React 组件要将组件呈现到屏幕上，我们可以使用 ReactDOM.render() 方法。以下是一个简单的示例：

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

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

在这个例子中，我们使用 ReactDOM.render() 方法将组件渲染到名为 root 的 HTML 元素中。

🎈组件的特性

Props 属性

在 React 中，组件可以通过 props（属性）接收外部传递的数据。这些 props 可以是任何类型的数据，例如字符串、数字、对象等。我们可以在组件内部通过 this.props 或函数组件参数的方式来访问这些属性。

import React from 'react';

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


export default Greeting;

在上面的例子中，我们定义了一个名为 Greeting 的函数组件，并接收一个 name 属性。在组件内部，我们可以通过 props.name 来访问这个属性。

State 状态

State（状态）是组件内部管理的可变数据。与 props 不同，state 是组件自身管理的，并且可以通过调用 setState() 方法进行更新。每当 state 更新时，React 会自动重新渲染组件。

import React from 'react';

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

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

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

export default Counter;

在这个例子中，我们定义了一个名为 Counter 的类组件，并使用 state 属性来存储计数值。每次点击按钮时，我们调用 increment() 方法来增加计数器的值，并使用 setState() 方法更新状态。

生命周期方法

React 组件还提供了一些生命周期方法，这些方法在组件的不同阶段被调用，允许我们在适当的时机执行特定的操作。例如，componentDidMount() 在组件首次渲染后立即调用，componentWillUnmount() 在组件被销毁之前调用等等。这些生命周期方法可以帮助我们管理组件的行为和交互。

import React from 'react';

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

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

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

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

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

export default Timer;

在这个例子中，我们定义了一个名为 Timer 的类组件，并使用 componentDidMount() 和 componentWillUnmount() 生命周期方法来启动和停止计时器。在 tick() 方法中，我们将计数器的值增加，并使用 setState() 方法更新状态。

组件间通信

React 中的组件间通信可以通过 props 和回调函数进行。父组件可以将数据和函数作为 props 传递给子组件，子组件可以使用这些 props 进行渲染和触发事件。

import React from 'react';

function Parent() {
  const handleClick = () => {
    console.log('Button clicked');
  };

  return <Child onClick={handleClick} />;
}

function Child(props) {
  return <button onClick={props.onClick}>Click Me</button>;
}

export default Parent;

在这个例子中，我们定义了一个名为 Parent 的函数组件和一个名为 Child 的函数组件。我们将 handleClick 函数作为 prop 传递给 Child 组件，并在 Child 组件中通过 props.onClick 来绑定点击事件。