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的问题呢?

• 计划一: bind给onClick显现绑定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>
    )
  }
}

条件渲染小事例

完成的效果如下：

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

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条件渲染
• 条件渲染小事例