Serenader

Learning by sharing

React 的 this

Mr. serenader Published at , updated at
on JavaScript,React

no-bind

export default class Hello extends React.Component {
    constructor (props) {
        super(props);
    }
    onChange (e) {
        this.setState({value: e.target.value});
    }
    render () {
        return (
            <div>
                <input onChange={this.onChange.bind(this)} />
            </div>
        );
    }
}
以上在调用 this.onChange 时使用了 bind 会导致 每次 render 的时候都会生成一个新的函数。 为了避免性能问题，可以先在 constructor 上先对函数进行 bind。
export default class Hello extends React.Component {
    constructor (props) {
        super(props);
        this.onChange = this.onChange.bind(this);
    }
    onChange (e) {
        this.setState({value: e.target.value});
    }
    render () {
        return (
            <div>
                <input onChange={this.onChange} />
            </div>
        );
    }
}
另外可以使用一种尚未确定下来的新的语法： Class property:
export default class Hello extends React.Component {
    constructor (props) {
        super(props);
    }
    onChange = (e) => {
        this.setState({value: e.target.value});
    }
    render () {
        return (
            <div>
                <input onChange={this.onChange} />
            </div>
        );
    }
}
onChange 方法的声明变成了箭头函数声明，此时相当于：
export default class Hello extends React.Component {
    constructor (props) {
        super(props);
        this.onChange = (e) => {
            this.setState({value: e.target.value});
        };
    }
    render () {
        return (
            <div>
                <input onChange={this.onChange.bind(this)} />
            </div>
        );
    }
}
https://github.com/jeffmo/es-class-fields-and-static-properties

method 1 - Using of Function.prototype.bind()

export default class CartItem extends React.Component {
    render() {
        <button onClick={this.increaseQty.bind(this)} className="button success">+</button>
    }
}

method 2 - Using function defined in constructor.

export default class CartItem extends React.Component {
    
    constructor(props) {
        super(props);
        this.increaseQty = this.increaseQty.bind(this);
    }

    render() {
        <button onClick={this.increaseQty} className="button success">+</button>
    }
}

method 3 - Using fat arrow function and constructor.

export default class CartItem extends React.Component {
    
    constructor(props) {
        super(props);
        this.increaseQty = () => this.increaseQty();
    }

    render() {
        <button onClick={this.increaseQty} className="button success">+</button>
    }
}

method 4 - Using fat arrow function and ES7 class properties.

export default class CartItem extends React.Component {
      
    increaseQty = () => this.increaseQty();

    render() {
        <button onClick={this.increaseQty} className="button success">+</button>
    }
}

method 5 - Using ES7 function bind syntax.

export default class CartItem extends React.Component {
    
    constructor(props) {
        super(props);
        this.increaseQty = ::this.increaseQty;
        // line above is an equivalent to this.increaseQty = this.increaseQty.bind(this);
    }

    render() {
        <button onClick={this.increaseQty} className="button success">+</button>
    }
}

method 6 - Using ES7 Function Bind Syntax in-place.

export default class CartItem extends React.Component {
    render() {
        <button onClick={::this.increaseQty} className="button success">+</button>
    }
}