bind的意義

以下組件在construtor中使用bind將onClick與類成員函數(shù)綁定：

import React, { Component } from 'react';

export default class ClickCounter extends Component {
    constructor(props) {
        super(props);
        this.onClick = this.onClick.bind(this);
        this.state = {
            count: 0
        };
    }

    onClick() {
        this.setState({
            count: this.state.count + 1
        });
    }

    render() {
        return (
            <div>
                <button onClick={this.onClick}>Click Me</button>
                <div>
                    Click Count : {this.state.count}
                </div>
            </div>
        )
    }
}

原因：
ES6的類成員函數(shù)與類實例并不是自動綁定的，constructor是組件裝載時調(diào)用的第一個函數(shù)，此時this指向當(dāng)前的類實例，使用bind就可以把成員函數(shù)綁定到這個實例。

prop和state

React 組件的數(shù)據(jù)分為兩種， prop state ，無論 prop 或者 state 的改變，都可能引
發(fā)組件的重新渲染。prop 是組件的對外接口， state 是組件的內(nèi)部狀態(tài)，對外用
prop ，內(nèi)部用 state。
prop state 的區(qū)別：

• prop 用于定義外部接口， state 用于記錄內(nèi)部狀態(tài)；
• prop 的賦值在外部世界使用組件時， state 的賦值在組件內(nèi)部；
• 組件不應(yīng)該改變 prop 的值，而 state 存在的目的就是讓組件來改變的。

組件向外傳遞數(shù)據(jù)

props用于將數(shù)據(jù)從父組件傳遞給子組件，子組件將內(nèi)部數(shù)據(jù)向父組件傳遞時也可以使用props。這種情況下，父組件要通過props向子組件傳遞可以調(diào)用的函數(shù)，子組件通過調(diào)用這個函數(shù)就能把內(nèi)部數(shù)據(jù)傳回給父組件。

image.png

import React, {Component} from 'react';
import Counter from './Counter';

export default class ControlPanel extends Component {
    constructor(props) {
        super(props);

        this.onCounterUpdate = this.onCounterUpdate.bind(this);
        this.state = ({
            sum: 30
        });
    }

    onCounterUpdate(previousValue, newValue) {
        this.setState({
            sum: this.state.sum + (newValue - previousValue)
        });
    }

    render() {
        return (
            <div>
                <Counter caption="First" onUpdate={this.onCounterUpdate} />
                <Counter caption="Second" onUpdate={this.onCounterUpdate}  initValue={10} />
                <Counter caption="Third" onUpdate={this.onCounterUpdate}  initValue={20} />
                <hr />
                <span>Total count: {this.state.sum} </span>
            </div>
        )
    }
}

父組件的onUpdate與成員函數(shù)onCounterUpdate綁定，因此在子組件調(diào)用onUpdate函數(shù)時，父組件就會通過onCounterUpdate取得子組件傳遞的值。

import React, {Component} from 'react';
import PropTypes from 'prop-types';

export default class Counter extends Component {

    constructor(props) {
        super(props);
        
        this.onAdd = this.onAdd.bind(this);
        this.onDecrease = this.onDecrease.bind(this);
        this.state = {
            count: props.initValue || 0
        };
    }

    onAdd() {
        this.updateValue(true);
    }

    onDecrease() {
        this.updateValue(false);
    }

    updateValue(isAdd) {
        const previousValue = this.state.count;
        const newValue = isAdd ? previousValue + 1 : previousValue - 1 ;
        this.setState({
            count: newValue
        });
        this.props.onUpdate(previousValue, newValue);
    }

    render() {
        return (
            <div>
                <button onClick={this.onAdd}>+</button>
                <button onClick={this.onDecrease}>-</button>
                <span>{this.props.caption} count:{this.state.count}</span>
            </div>
        )
    }
}

Counter.propTypes = {
    caption: PropTypes.string.isRequired,
    initValue: PropTypes.number,
    onUpdate: PropTypes.func
}

Counter.defaultProps = {
    initValue: 0,
    onUpdate: f => f
}