媒介

由于JS的灵活性，我们在React中实在有很多种绑定事宜的体式格局，然则，实在有很多我们罕见的事宜绑定，实在并非高效的。所以本文想给人人引见一下React绑定事宜的准确姿态。

罕见两各种毛病绑定事宜

class ErrorExample1 extends Component {

    balabala(e) {console.log(e)}
    
    render() {
        const { text } = this.state;
        
        return (
          <Wrapper>
            {text}
            <Balabala onClick={(e) => this.balabala(e)}></Balabala>
          </Wrapper>
        )
    }
}

class ErrorExample2 extends Component {
    balabala(e) {console.log(e)}
    
    render() {
        const { text } = this.state;
        return (
          <Wrapper>
            {text}
            <Balabala onClick={this.balabala.bind(this)}></Balabala>
          </Wrapper>
        )
    }
}

这是两种最罕见的React绑定事宜代码，但它为何是毛病的？

每当你的text发生变化，就会rerender，只需组件从新render，那就会从新建立新的事宜函数，进而绑定事宜，这个历程的开支就是极大极大的糟蹋。相当于，每次rerender都邑建立一次事宜函数。

这据说是 Best Practice

class Balabala extends Component {
    constructor(p) {
        suprt(p);
        this.balabala = this.balabala.bind(this);
    }
    render() {
        const { text } = this.state;
        return (
          <Wrapper>
            {text}
            <Balabala onClick={this.balabala}></Balabala>
          </Wrapper>
        )
    }
}

然则我更喜好的姿态

class Balabala extends Component {
    constructor(p) {
        suprt(p);
    }
    醒来记得想我 = (e) => {
        alert('想你了');
    }
    render() {
        const { text } = this.state;
        return (
          <Wrapper>
            {text}
            <Balabala onClick={this.醒来记得想我}></Balabala>
          </Wrapper>
        )
    }
}

应用箭头函数，帮我们bind this。避免了在组织函数里性命一堆的变量。削减键盘的敲击，延伸性命。

固然，还有人会问，如许的写法怎样传参呢？之前他人会如许写

class 渣男 extends Component {
    constructor(p) {
        suprt(p);
    }
    醒来记得想我 = (e, text) => {
        alert(text); // alert 滚吧，渣男
    }
    render() {
        const { text } = this.state;
        return (
          <Wrapper>
            {text}
            <Balabala onClick={this.醒来记得想我.bind(e, '滚吧，渣男')}></Balabala>
          </Wrapper>
        )
    }
}   

然则实在，我们能够如许传参，越发简洁明了

class 渣男 extends Component {
    constructor(p) {
        suprt(p);
    }
    醒来记得想我 = (text) => (event) => {
        alert(text); // 你渣我也喜好，由于是你
    }
    render() {
        const { text } = this.state;
        return (
          <Wrapper>
            {text}
            <Balabala onClick={this.醒来记得想我( '你渣我也喜好，由于是你')}></Balabala>
          </Wrapper>
        )
    }
}

动态绑定

基于这个我们还能够针对统一事宜修正多个input值，举行事宜优化

class ChangeMyName extends Component {
  修正渣男称号 = name => {
    if (!this.handlers[name]) {
      this.handlers[name] = event => {
        this.setState({ [name]: event.target.value });
      };
    }
    return this.handlers[name];  
  }
  
  render() {
    return (
        <>
          <input onChange={this.修正渣男称号('男神1号')}/>
          <input onChange={this.修正渣男称号('渣男2号')}/>
        </>
    )
  }
}

歪门邪道，邪教！(个人不喜好罢了)

import autoBind from 'react-autobind';

class Balabala extends Component {
    constructor() {
       autoBind(this);
    }
    醒来记得想我 (e) {
        alert('想你了');
    }
    render() {
        const { text } = this.state;
        return (
          <Wrapper>
            {text}
            <Balabala onClick={this.醒来记得想我}></Balabala>
          </Wrapper>
        )
    }
}

import { BindAll } from 'lodash-decorators';

@BindAll()
class Bbb extends Component {}

// 这类写法等同于 bind
class Bbb extends Component {
    balabala(){}
    render() {
        const { text } = this.state;
        return (
          <Wrapper>
            {text}
            <Balabala onClick={::this.balabala}></Balabala>
          </Wrapper>
        )
    }
}

基础都迥然不同吧，就不过量引见了。看到这里，你也晓得究竟应当怎样绑定事宜了。

个人网站：
http://meckodo.com