【React】JSX语法基础

JSX语法就是React的框架语言

通过JSX在js文件中创建html元素 例如红色部分就是jsx

const  h1  =  < h1 > Hello world </ h1 > ;

尽管就像html但是它在js文件中,如果不编译的话无法被理解

创建jsx元素时应该使用有效的HTML标记,而且react中的dom属性与html不同记得查看

比如html中的class 在jsx中要写成className

 

注意:自己创建的组件要大写开头 如: App , TodoList 这样

在JSX中使用JS语法要使用 {  } 包裹住

React 的核心我现在的理解就是 把dom层的工作放到数据层来,利用绑定事件来体现响应式设计,能改数据层都在数据层改.对应于原来原生开发的命令式开发,React是声明式开发.

 

• JSX在创建组件时也有2种,一种是函数式组件,简单快捷,一种类组件,功能更多一点.

函数组件和类组件的区别：https://blog.csdn.net/xuchaobei123/article/details/75195522 详见这里

我在学的时候用的是类组件,要使用构造方法和状态.

 

• 组件在返回render渲染时 最外层只能有一个大标签 可以用Fragment 这样页面上Fragment不会显示,也可以用div,但是有点不好看.Fragment实际上也是一个组件

• 在JSX里写注释有两种方式

{
//下面是一个input框
}
{/*下面是一个input框*/}

 

• JSX中class要写成className ,避免与类组件混淆

//常规js
<input class='input'/>

//JSX写法
<input className='input'/>

 

• React 的核心我现在的理解就是 把dom层的工作放到数据层来,利用绑定事件来体现响应式设计,能改数据层都在数据层改.

例子:

这是一个Todolist的例子 实现了实时响应input栏,点击提交将input中的内容添加到列表中,点击列表中的值可以删除的效果

首先创建类组件 

创建构造方法,在里面设定state的值

再在元素里设定绑定事件, 如 onChange={this.handleInputChange.bind(this)}

再在后面补全绑定事件的功能

注意 在这里使用js语法的时候都要在外面给大括号

在修改state数据时也不能直接改,要通过this.setState()

// 接受event对象
	handleInputChange(e){
		// console.log(this) TodoList组件
		// console.log(e.target) 对应的dom元素
		this.setState({
			inputValue:e.target.value
		})
	}