React.js 是一种用于构建用户界面的JavaScript库，它由Facebook开发并维护，近年来广受欢迎。React.js采用组件化开发的思路，将UI分解为一个个独立的、可复用的组件，每个组件负责自己的一部分UI。

在本文中，我们将从零开始介绍React.js，包括如何创建一个React应用、React的基本概念、如何创建组件、如何使用状态和属性等。最后，我们会通过一个实例来进一步说明React.js的用法。

一、创建React应用

首先，我们需要安装 Node.js。然后，我们可以通过命令行工具（如终端）进入要创建项目的目录，运行以下命令，创建一个新的React应用：

```

npx create-react-app my-app

cd my-app

npm start

```

这将创建一个名为my-app的文件夹，并在其中生成一些React的示例代码。npm start命令会启动一个本地开发服务器，自动打开一个浏览器窗口，我们就可以看到运行的React应用了。

二、React的基本概念

1. 组件 (Component)

在React中，组件是构建UI的基本单元。每个组件都是一个独立的、可重用的部分，它可以包含HTML元素、其他组件或混合内容。

2. 属性 (Props)

传递给组件的参数称为属性。属性是只读的，在组件中不能被修改。组件可以直接使用它们，或将它们传递给它们的子组件。属性通常定义在组件的声明中。

3. 状态 (State)

状态是组件的可变数据。它可以在组件中被修改，会引起重新渲染组件。

三、创建组件

在React中，组件可以采用以下两种方式创建：函数组件和类组件。

1. 函数组件

函数组件是最基本、最简单的组件形式。它只是一个JavaScript函数，它接收一些属性并返回一个React元素。

下面是一个例子，在这个例子中我们创建了一个函数组件Welcome，它返回一个h1标题，并使用属性来传递文本内容（name属性）。

```

function Welcome(props) {

return

Hello, {props.name}

}

// 使用

const element =

ReactDOM.render(element, document.getElementById('root'));

```

2. 类组件

类组件也是React中常用的一种组件形式。相比函数组件，它更灵活、更强大，可以拥有自己的状态和生命周期方法。

下面是一个例子，在这个例子中我们创建了一个类组件Welcome，它继承了React.Component类，并重写了render方法。

```

class Welcome extends React.Component {

render() {

return

Hello, {this.props.name}

}

}

// 使用

const element =

ReactDOM.render(element, document.getElementById('root'));

```

四、使用状态和属性

1. 属性 (Props)

在React中，父组件可以通过属性（Props）传递数据给子组件。下面是一个例子，在这个例子中我们创建了一个函数组件Person，它接收了一个name属性，并返回一个包含属性值的元素。

```

function Person(props) {

return

My name is {props.name}.

}

// 使用

const element = ;

ReactDOM.render(element, document.getElementById('root'));

```

2. 状态 (State)

状态 (State) 是React组件中的一个重要概念，它用于存储组件的可变数据。状态可以通过this.state来访问，并且只能通过this.setState方法来修改。组件状态的改变会自动触发重新渲染。

下面是一个例子，在这个例子中我们创建了一个类组件Clock，它每秒钟更新一次时间，并输出到界面上。

```

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 (

);

}

}

// 使用

ReactDOM.render(

,

document.getElementById('root')

);

```

五、实例说明

下面以一个实例来说明React.js的用法，我们将创建一个简单的待办事项列表，用户可以添加、编辑、删除事项。在这个实例中，我们将覆盖React.js大部分核心概念，包括组件、属性、状态、组件生命周期等。

首先，我们创建一个TodoList组件，它表示待办事项列表。该组件包含一个表单用于添加新的待办事项，并显示当前已有的待办事项列表。

```

import React from 'react';

import './App.css';

class TodoList extends React.Component {

constructor(props) {

super(props);

this.state = {

items: [],

text: ''

};

}

// 输入框输入内容改变时更新状态

handleChange = (e) => {

this.setState({text: e.target.value});

}

// 点击添加按钮时添加新事项

handleSubmit = (e) => {

e.preventDefault();

if (!this.state.text.length) {

return;

}

const newItem = {

text: this.state.text,

id: Date.now()

};

this.setState(state => ({

items: state.items.concat(newItem),

text: ''

}));

}

// 点击删除按钮时删除事项

handleDelete = (id) => {

this.setState(state => ({

items: state.items.filter(item => item.id !== id),

}));

}

// 点击编辑事项时切换到编辑模式

handleEdit = (id) => {

const index = this.state.items.findIndex(item => item.id === id);

const item = this.state.items[index];

item.editing = true;

this.setState({

items: [

...this.state.items.slice(0, index),

item,

...this.state.items.slice(index + 1)

]

})

}

// 编辑事项完成后，更新列表

handleSave = (id, text) => {

const index = this.state.items.findIndex(item => item.id === id);

const item = this.state.items[index];

item.editing = false;

item.text = text;

this.setState({

items: [

...this.state.items.slice(0, index),

item,

...this.state.items.slice(index + 1)

]

})

}

render() {

return (

);

}

}

// TodoItems组件用于显示待办事项列表

class TodoItems extends React.Component {

render() {

const items = this.props.items.map(item => (

key={item.id}

item={item}

handleDelete={this.props.handleDelete}

handleEdit={this.props.handleEdit}

handleSave={this.props.handleSave}

/>

));

return (

{items}

);

}

}

// TodoItem组件用于显示单个待办事项

class TodoItem extends React.Component {

constructor(props) {

super(props);

this.state = {

editing: false,

text: props.item.text

};

}

// 单击编辑按钮时切换到编辑模式

handleEdit = () => {

this.setState({editing: true});

}

// 单击取消按钮时退出编辑模式

handleCancel = () => {

this.setState({

editing: false,

text: this.props.item.text

});

}

// 输入框输入内容改变时更新状态

handleChange = (e) => {

this.setState({text: e.target.value});

}

// 点击保存按钮时完成编辑，退出编辑模式

handleSave = () => {

this.props.handleSave(this.props.item.id, this.state.text);

this.setState({editing: false});

}

// 点击删除按钮时删除事项

handleDelete = () => {

this.props.handleDelete(this.props.item.id);

}

render() {

// 处理编辑模式和普通模式的不同显示方式

let view, edit;

if (this.state.editing) {

view = null;

edit = (

);

} else {

view = (

);

edit = null;

}

return (

);

}

}

export default TodoList;

```

在这个实例中，我们使用了React的大部分特性，包括组件、状态、属性等。我们创建了三个组件：TodoList、TodoItems和TodoItem。TodoList组件是这个应用的根组件，它包含了一个表单用于添加新事项和一个TodoItems组件用于显示待办事项列表。TodoItems组件是一个无状态组件，它只负责显示待办事项列表。TodoItem组件则表示单个待办事项，它拥有自己的状态和生命周期，可以切换到编辑模式进行编辑。三个组件相互配合，实现了一个完整的待办事项列表应用。

总结

本文介绍了React.js的基本概念和使用方法，包括组件、属性、状态等。通过一个实例，我们更深入了解了React.js的应用方式。React.js是一个非常强大、灵活的用户界面库，它的组件化开发思想、声明式UI编程方式，提高了开发效率，为前端开发带来了新的思路和技术。

壹涵网络我们是一家专注于网站建设、企业营销、网站关键词排名、AI内容生成、新媒体营销和短视频营销等业务的公司。我们拥有一支优秀的团队，专门致力于为客户提供优质的服务。

我们致力于为客户提供一站式的互联网营销服务，帮助客户在激烈的市场竞争中获得更大的优势和发展机会！