React事情绑定

我正在参与「启航计划」

热身运动 ‍♂️

现在有两个问题来答复一下 :

第一个问题是假如原生DOM原生有一个监听事情,咱们能够怎么操作呢?

  • 办法一: 获取DOM原生,添加监听事情;
  • 办法二: 在HTML原生中,直接绑定onclick;

第二个问题是在React中是怎么操作呢?

  • React 事情的命名选用小驼峰式而不是纯小写
  • 咱们需求经过{}传入一个事情处理函数,这个函数会在事情发生时被履行

this指向

this的四种绑定规则:

  1. 默许绑定: 独立履行,如foo(),指向window或许undefined
  2. 隐式绑定: 被一个目标履行,如obj.foo()指向obj
  3. 显式绑定: call/apply/bind,那么foo.call("aaa")后指向String("aaa")
  4. new绑定: new Foo(),创建一个新目标,而且赋值给this

Babel中运用的是严格形式

处理事情绑定的this指向问题

为什么直接打印this的时分显现的是undefined呢?原因是onClick函数并不是咱们主动调用的,而当button发生改变时,React内部调用了onClick函数而它内部调用时,并不知道要怎么绑定正确的this;

那么怎么处理this的问题呢?

  • 计划一: bindonClick显现绑定this
  • 计划二: 运用 ES6 class fields 语法
  • 计划三: 事情监听时传入箭头函数 (个人引荐)

bind绑定

这个办法是在官方文档里有写的

class App extends React.Component {
  constructor() {
    // ...
    this.foo = this.foo.bind(this);
  }
  foo() {
    console.log('foo click', this);
  }
  render() {
    // ...
    return (
      <div>
        // ...
        <button onClick={this.foo}>foo点击</button>
      </div>
    )
  }
}

ES6的class field

class App extends React.Component {
  constructor() {
    // ...
  }
  bar = () => {
    console.log('bar click', this);
  }
  render() {
    // ...
    return (
      <div>
        // ...
        <button onClick={this.bar}>bar点击</button>
      </div>
    )
  }
}

直接传入一个箭头函数

这个办法比较常用,而且传入参数非常便利

class App extends React.Component {
  constructor() {
    // ...
  }
  // ...
  render() {
    // ...
    return (
      <div>
        // ...
        <button onClick={() => console.log('箭头函数 click', this)}>箭头函数点击</button>
      </div>
    )
  }
}

参数传递

在履行事情函数时,有可能咱们需求获取一些参数信息: 比方event目标、其他参数

状况一: 获取event目标 许多时分咱们需求拿到event目标来做一些事情(比方阻止默许行为),那么默许状况下,event目标有被直接传入,函数就能够获取到event目标

状况二:获取更多参数 有更多参数时,咱们最好的办法便是传入一个箭头函数,主动履行的事情函数,而且传入相关的其他参数

event传递

咱们只要运用上述处理this的第三种办法,就能够很简单的完成event参数的传递。

class App extends React.Component {
  constructor() {
    // ...
  }
  foo(event) {
    console.log('foo click', this, event);
  }
  render() {
    return (
      <div>
        // ...
        {/* 1.event参数传递 */}
        <button onClick={(event) => this.foo(event)}>foo点击</button>
      </div>
    )
  }
}

额定参数传递

只要运用箭头函数,就能完成额定参数的传递。

class App extends React.Component {
  constructor() {
    // ...
  }
  bar(event, age, name) {
    console.log('foo click', this, event, age, name);
  }
  render() {
    return (
      <div>
        // ...
        {/* 2.额定参数传递 */}
        <button onClick={(event) => this.bar(event, 'karl', 23)}>bar点击</button>
      </div>
    )
  }
}

React条件渲染

某些状况下,界面的内容会根据不同的状况显现不同的内容,或许决议是否渲染某部分内容,在vue中,咱们会经过指令来操控,比方v-if、v-show;在React中,一切的条件判别都和一般的JavaScript代码共同

因此常见的条件渲染的办法有:

  • 办法一: 条件判别句子,适合逻辑较多的状况
  • 办法二: 三元运算符,适合逻辑比较简单
  • 办法三: 逻辑与&&

运用if进行条件判别

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      isReady: true
    }
  }
  render() {
    const { isReady }=this.state;
    let showElement = null;
    if(isReady) {
      showElement = <button>开端</button>
    } else {
      showElement = <p>完毕</p>
    }
    return (
      <div>
        <div>{showElement}</div>
      </div>
    )
  }
}

运用三元运算符

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      isReady: true
    }
  }
  render() {
    const { isReady }=this.state;
    return (
      <div>
        <div>{ isReady ? <button>开端</button> : <p>完毕</p> }</div>
      </div>
    )
  }
}

3.逻辑与&&

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      friend: {
        name: 'karl',
        job: 'front end'
      }
    }
  }
  render() {
    const { friend }=this.state;
    return (
      <div>
        <div>{ friend && <p>{friend.name + ": " + friend.job}</p> }</div>
      </div>
    )
  }
}

条件渲染小事例

完成的效果如下:

前端小白学 React 框架(四)

其实逻辑也不难,完成的办法也有许多,看自己喜爱怎么写吧:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      message: '条件渲染小事例',
      content: null
    }
  }
  show() {
    this.setState({
      content: this.state.content ? null : <p>我显现出来啦</p>
    });
  }
  render() {
    const { message, content }=this.state;
    return (
      <div>
        <h2>{message}</h2>
        <button onClick={() => this.show()}>toggle</button>
        <div>{content}</div>
      </div>
    )
  }
}

这儿的代码相当于Vue的v-if,其实也能够完成出v-show来减小性能开支。

写在最终

假如我们喜爱的话能够收藏本专栏,之后会渐渐更新,然后我们觉得不错能够点个赞或收藏一下 。

本节的源码放在作者的GitHub仓库里,分别是:

  • 事情绑定
  • 参数传递
  • React条件渲染
  • 条件渲染小事例