React:jsx语法、数据驱动的设计思想和事件绑定、TodoList练习

jsx语法

一、jsx语法中有两种标签:

1、普通的html标签:在组件中返回出去渲染的标签内容不需要像原生js那样加引号

2、组件标签:例如入口文件index.js中,渲染App组件内容时,写成首字母必须大写

二、使用变量、js表达式、注释,外层要加{}

三、给元素加类名需要通过className属性,class会冲突

四、使用label标签与input关联时,label里的for需要写成htmlFor(表明这是html的for,不是js的for循环)

五、想让react不对标签转义,也就是

text

==》 大大的text   的方法:

在标签中新增dangerouslySetInnerHTML属性,绑定js表达式需要{}包裹,所以先加一个{},然后里面是一个对象,键是__html,值是渲染的数据



数据驱动的设计思想和事件绑定(重点)

设计思想

React基于数据驱动,所有操作都不直接操作dom,而是操作数据。

组件被创建的最初始的时间,constructor会最先被执行,在constructor中定义需要的数据。

super是关键字,它指代父类的实例(即父类的this对象),子类必须在constructor方法中调用super方法,否则新建实例时会报错,因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工,如果不调用super方法,子类就得不到this对象。

constructor(props){

        super(props);    【(constructor和super)是固定写法】

        this.state = {    【定义组件的数据,必须写在this.state里面】

                inputValue: "Hello world",

         };

}

在JSX语法里,如果标签属性等于一个js变量或js表达式的时候,外面要包裹一个花括号

      

事件绑定

1、绑定事件

React事件名的写法必须是驼峰式,如onChange,写成onchange的话会报错,然后在组件中定义事件(class类)

onChange={this.handleInputChange.bind(this)}

2、事件的this默认指向undefined

react触发事件时,内部的this并不指向当前组件,默认是undefined,所以需要使用 bind()方法改变函数内部的this的指向。

bind()方法是将调用bind方法的对象的this指向改为bind的参数,这里bind参数为this,这个this是render的this,指向当前组件,所以调用bind以后该方法的this就指向当前组件。

另一种解决办法是将handleInputChange函数改为箭头函数,因为箭头函数的this指向为最外层对象,这里即是当前组件。

3、修改state中的数据

需要通过this.setState ( {  } )方法来修改

练习:

一、实现TodoList新增li功能

1、将input框里的内容渲染到数组中

给input框绑定onKeyUp事件,通过e.keyCode是否等于13,判断按下的键是否为回车键,把input框的内容加到数组中。

handleKeyUp(e) {

if (e.keyCode === 13) {

const list = [...this.state.list, this.state.inputValue];     拷贝一个list副本,然后加上当前的inp框输入的内容,然后赋值给state中的list

this.setState({ list });【ES6语法,键和值一样的时候写一个就可以了】

}

}  

2、将数组中的数据遍历渲染到标签里

this.state.list.map((value,index)=>{

  return

  • {value}
  •  

    })

    在JSX语法中,要写js表达式,一定要包在花括号里。

    map是数组遍历的方法,里面接收参数并执行语句,返回的内容要使用return。return的结果中要使用变量时一样要加花括号。

    二、实现TodoList删除功能

    点击li,相应li的内容被删除

    (1)给li绑定onCLick事件

  • 要点击li相应的li被删除,需要给函数传入参数index,参数写在后面的bind方法里。

    (2)删除内容的函数

    handleItemClick(index) {

    const list = [...this.state.list];【调用数据时,最好使用解构赋值拷贝一个副本出来,避免使用过程中出现问题】

        list.splice(index, 1);

        this.setState({ list });

    }     

  • 细节优化

    1、bind(this)是在用户触发事件的时候,都会重新生成一个新的函数,这样性能比较低。

    解决方法:

    可以把this的绑定放在constructor里面,state前,开始就把这个事件的this改过来

    但是传入参数的函数就不能这样在constructor里绑定了,因为这种函数确实需要每次调用的时候都生成一次,如onClick={this.handleItemClick.bind( this,  index ) }

    2、可以把对标签的循环渲染代码放在一个方法里,将循环的结果使用return返回,在下面直接调用这个方法,这样JSX看起来就非常简洁了。

    比如:getItemList() {

    return this.state.list.map((value, index) => {

    return (

  • {value}

  • );

    });

    }

      {this.getItemList()}

    ————————————————————

    3、在React中给一个标签添加样式class的时候,不能使用class属性,它会认为和定义类的class混淆,应该使用className属性来添加类名   

    你可能感兴趣的:(React:jsx语法、数据驱动的设计思想和事件绑定、TodoList练习)