快速学习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)

生命周期示例:

测试结果: