react学习笔记(3)

react事件绑定

import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      <div>
        <input></input>
        <button onClick={()=>{
            console.log('click')
        }}>add</button>
        <button onClick={this.handleClick}>add3</button>
        <button onClick={this.handleClick2}>add4</button>
        <button onClick={()=>{
            this.handleClick3()
        }}>add2</button>
      </div>
    )
  }
  handleClick(){
    console.log('click2')
  }
  handleClick2 = ()=>{
    console.log('click2')
  }
  handleClick3(){
    console.log('click3')
  }
}

1.使用onClick={()=>{

    console.log()

}}进行事件绑定

里面的this跟render一致

缺点：当代码复杂，逻辑过多的时候会导致可读性差。

2.使用onClick={

    this.handleClick

}进行事件绑定，此方法需要注意不要在函数的后面加小括号，加完之后将会在渲染的时候执行一次，之后this.handleClick将变为该函数的返回值

缺点：需要注意this的指向问题，this为undefind，即指向react事件系统

解决：改为this.handelClick.bind(this)

  解决原因：通过js改变this指向的方法改变了函数this的指向

js改变this指向的方法：1.call改变this，自动执行函数 obj1.getName.call(obj2)()

                    2.apply改变this，自动执行函数     obj1.getName.apply(obj2)()

                    3.bind改变this，不会自动执行，手动加括号执行函数 obj1.getName.bind(obj2) 此处后面的小括号可选择是否添加，加了自动执行

3.使用onClick={

    this.handleClick2

}进行事件绑定，与2相同，但是绑定的事件为箭头函数，因此this指向render，不需要和2那样改指向

4.使用onClick={()=>{

    this.handleClick2()

}}

此处需要小括号

注意：react的事件并没有绑定在这些按钮本身身上,react事件系统机制会将事件绑定在根节点身上

Ref的应用

1给标签设置ref="username"

通过这个获取this.refs.username，ref可以获取到应用的真实dom

2给组件设置ref= "username"

通过这个获取this.refs.username ,ref可以获取到组件对象

3新的写法

myref = React.createRef()
    render() {
    return (
      <div>
        {/* <input ref="mytext"></input> */}
        <input ref="this.myref"></input>
        <button onClick={()=>{
            // console.log('click',this.refs.mytext.value)
            console.log('click',this.myref.current.value)
        }}>add</button>
      </div>
    )
  }

循环渲染

react里没有像v-for类型的循环渲染方式，因此想要循环渲染的话，需要使用for语句循环或是用原生js的map方式

 

深复制

深复制之后，创建了一个和a一样的数组b，而且对b进行改变，对a没有影响

也是深复制

条件渲染

{this.state.list.length === 0?<div>暂无待办事项</div>:null}

当满足条件时，即this.state.list.length为0时，显示div,否则为空，即什么也不显示。

也可以用于控制某一元素的class

富文本显示

<span dangerouslySetInnerHTML={

  {

    _html:item.mytext

  }

}></span>

当这样写的时候，该span标签内支持富文本.

betterscoll

better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。

下载：npm i better-scoll

引入：import BetterScoll from "better-scoll"

使用: new BetterScoll(".thisDiv")