其他分享
首页 > 其他分享> > react第三节-基础概念梳理

react第三节-基础概念梳理

作者:互联网

jsx中绑定this

为什么this会是undefined ?

  1. 可以使用bind方式绑定this

<button onClick={this.sayHi.bind(this)}>{this.state.btnDes}</button>

  1. 可以使用箭头函数方式绑定this

<button onClick={() => this.sayHi()}>{this.state.btnDes2}</button>

jsx中的列表渲染

一般的,都是使用map进行列表渲染,同时返回一个jsx-dom

    <ul>
          {/* 在这里,一般用map来进行列表渲染 */}
          {
            this.state.movies.map((item, index) => <li onClick={() => this.getItme(item)} key={index}>{item}</li>)
          }
    </ul>

计数器案例

  1. setState的函数形式:

传递一个函数可以让你在函数内访问到当前的 state 的值。因为 setState 的调用是分批的,所以你可以链式地进行更新,并确保它们是一个建立在另一个之上的,这样才不会发生冲突

 this.setState((pre, next) => {
      console.log(pre, next);
      return {
        val: data
      }
    })

几点提示

pre : state更改前的上一次状态
next : state更改后的状态
函数式必须要return一个对象,分别对应state内的键值对

  1. 绑定属性

绑定属性类似原生小程序,如
<input onChange={(e) => { this.changeVal(e) }} value={this.state.val ? this.state.val : 0} />

  1. react并没有双向绑定,因而要使用e事件对象来找到值

  2. 关于num++ 与num+1
    要使用num+1

在使用setState的时候不能使用num++,否则会导致修改失败 ,并且在事件触发时state也只会保持原值

JSX语法

描述:jsx是js的拓展语法,想要使用jsx ,需要给script标签中添加 type="text/babel"属性

  1. jsx规范
  2. jsx顶部只允许有一个根元素,即便是空标签也可以
  3. jsx外层包裹一个小括号,一来方便阅读,二来可以换行书写
    3.jsx中的标签可以是单标签,也可以是双标签,但如果是单标签,需要/>结尾,如<img />, <div />
  4. jsx注释

通常使用{/* 这里是注释 */}来表示,在jsx上下文环境下,ctrl+/可以自动生成注释行

  1. jsx嵌入变量

标签:第三节,标签,绑定,react,state,num,jsx,梳理,setState
来源: https://www.cnblogs.com/hjk1124/p/14917003.html