React核心概念，轻松入门React世界

2023-11-06 21:28:31

从零开始，探索React核心概念

React作为目前最流行的前端框架之一，以其组件化的设计理念和丰富的生态系统备受青睐。如果你是一位前端开发新手，想要深入学习React，那么掌握其核心概念是必不可少的。本文将从零开始，为你揭开React的神秘面纱，带你领略其强大的魅力。

一、React项目创建：从脚手架到应用启动

首先，我们需要创建一个React项目。可以使用Create React App脚手架来快速搭建项目环境。通过简单的命令，你就可以轻松创建项目、安装依赖并启动应用。

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

项目结构如下：

my-react-app
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   └── robot
├── src
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js

其中，public目录下一般存储公共文件，如index.html、favicon.ico等。src目录下是项目的主要源代码，包括组件、样式、图片等文件。App.js是初始化生成的组件文件，index.js是React应用的入口文件。

二、React组件：构建用户界面的基本单元

React组件是构建用户界面的基本单元。它可以理解为一个独立的模块，具有自己的状态和行为。在React中，组件可以分为函数式组件和类组件。函数式组件更简单，仅接受props（属性）作为输入，并返回一个React元素。而类组件则更复杂，可以定义状态、生命周期方法等。

1. 函数式组件

const MyComponent = (props) => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.content}</p>
    </div>
  );
};

2. 类组件

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0,
    };
  }

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.incrementCount}>+</button>
      </div>
    );
  }

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

三、React属性与状态：组件的数据管理

属性（props）和状态（state）是组件管理数据的重要工具。属性是父组件向子组件传递数据的方式，而状态则是组件自身维护的数据。属性是只读的，不能在子组件中修改，而状态是可变的，可以通过setState()方法来更新。

const MyComponent = (props) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

四、React生命周期：组件的诞生、成长与消亡

React生命周期是指组件从创建到销毁所经历的各个阶段。这些阶段包括：

挂载阶段： componentDidMount()，组件挂载到DOM后执行。
更新阶段： componentDidUpdate()，组件更新后执行。
卸载阶段： componentWillUnmount()，组件卸载前执行。

class MyComponent extends React.Component {
  componentDidMount() {
    console.log('组件已挂载到DOM');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('组件已更新');
  }

  componentWillUnmount() {
    console.log('组件已卸载');
  }

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.incrementCount}>+</button>
      </div>
    );
  }

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