快速学习ReactJS-快速入门

2.4 React快速入门

2.4.1、JSX语法

JSX语法就是，可以在js文件中插入html片段，是React自创的一种语法。JSX语法会被Babel等转码工具进行转码，得到正常的js代码再执行。 使用JSX语法，需要2点注意：

1. 所有的html标签必须是闭合的，如：

hello world

写成这样是不可以的：

hello world

1. 在JSX语法中，只能有一个根标签，不能有多个。

在这里插入图片描述

在JSX语法中，如果想要在html标签中插入js脚本，需要通过{}插入js脚本。

在这里插入图片描述

2.4.2、组件

在React中，这样定义一个组件：

在这里插入图片描述

查看效果：

在这里插入图片描述

2.4.2.1、导入自定义组件

创建Show.js文件，用于测试导入组件：

在这里插入图片描述

2.4.2.2、组件参数

组件是可以传递参数的，有2种方式传递，分别是属性和标签包裹的内容传递，具体使用如下：

在这里插入图片描述

其中，name="zhangsan"就是属性传递，shanghai就是标签包裹的内容传递。那么，在HelloWord.js组件中如何接收参数呢？ 对应的也是2种方法：

• 属性：this.props.name 接收；
• 标签内容：this.props.children 接收； 使用如下：

在这里插入图片描述

测试：

在这里插入图片描述

在这里插入图片描述

2.4.2.3、组件的状态

每一个组件都有一个状态，其保存在this.state中，当状态值发生变化时，React框架会自动调用render()方法，重新 渲染页面。

其中，要注意两点： 一： this.state值的设置要在构造参数中完成； 二：要修改this.state的值，需要调用this.setState()完成，不能直接对this.state进行修改； 下面通过一个案例进行演示，这个案例将实现：通过点击按钮，不断的更新this.state，从而反应到页面中。

在这里插入图片描述

在这里插入图片描述

初始状态：

在这里插入图片描述

当点击“添加”按钮：

在这里插入图片描述

过程分析：

在这里插入图片描述

2.4.2.4、生命周期

组件的运行过程中，存在不同的阶段。React 为这些阶段提供了钩子方法，允许开发者自定义每个阶段自动执行的函数。这些方法统称为生命周期方法（lifecycle methods）

在这里插入图片描述

生命周期示例：

在这里插入图片描述

在这里插入图片描述

测试结果：

在这里插入图片描述