react第三节-基础概念梳理

jsx中绑定this

为什么this会是undefined ？

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

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

2. 可以使用箭头函数方式绑定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内的键值对

2. 绑定属性

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

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

4. 关于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+/可以自动生成注释行

3. jsx嵌入变量