React 組件中“this”的可擴展性的正確使用

Question

我們可以簡單地描述一下this.props是來自父組件的數據流， this.state是用於保持組件的當前狀態，我們在 React 中開發時大量依賴的機制是在setState()之后重新渲染。

如果我對這兩個用法的理解沒有錯，除了持有函數對象之外，利用this的可擴展性來持有一些被認為是全局變量的值是否合適？

例如，如果我想在我的組件上使用“滑動”方式，我可以執行以下操作：

class Slider extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            movement: 0,
            touchStartX: 0,
            prevTouchX: 0,
            beingTouched: false
        };  
        this.handleTouchStart = this.handleTouchStart.bind(this);
        this.handleTouchMove = this.handleTouchMove.bind(this);
        this.handleTouchEnd = this.handleTouchEnd.bind(this);
    }
    
    handleTouchStart(e) {
        this.setState({
            touchStartX: e.targetTouches[0].clientX,
            beingTouched: true
        });
    }
    
    handleTouchMove(e) {
        if (this.state.beingTouched) {
            let deltaX = e.targetTouches[0].clientX - this.state.touchStartX;
            this.setState({
                movement: deltaX,
                prevTouchX: e.targetTouches[0].clientX
            });
        }
    }
    handleTouchEnd(e) {
        // handle the sliding and set state touchStartX and beingTouched to 0 and false.
    }
    render() {
        return (<div className = 'sliderBox' 
                 onTouchStart = {e => this.handleTouchStart(e)}  
                 onTouchMove = {e => this.handleTouchMove(e)}  
                 onTouchEnd = {e => this.handleTouchEnd(e)}></div>);
    }
}
export default Slider;

這是我構建的應用程序的一部分，它運行良好。 但我仍然不知道，如果它是一個很好的方式來使用國家財產。 或者做這樣的事情就可以了：

class Slider extends React.Component {
    constructor(props) {
        super(props);
        this.movement = 0;
        this.touchStartX = 0;
        this.prevTouchX = 0;
        this.beingTouched = false;

        this.handleTouchStart = this.handleTouchStart.bind(this);
        this.handleTouchMove = this.handleTouchMove.bind(this);
        this.handleTouchEnd = this.handleTouchEnd.bind(this);
    }
    
    handleTouchStart(e) {
        this.touchStartX = e.targetTouches[0].clientX;
        this.beingTouched = true;
    }
    
    handleTouchMove(e) {
        if (this.beingTouched) {
            let deltaX = e.targetTouches[0].clientX - this.state.touchStartX;
            this.movement = deltaX;
            this.prevTouchX = e.targetTouches[0].clientX;
        }
    }
    handleTouchEnd(e) {
        // handle the sliding and set state touchStartX and beingTouched to 0 and false.
    }
    render() {
        return (<div className = 'sliderBox' 
                 onTouchStart = {e => this.handleTouchStart(e)}  
                 onTouchMove = {e => this.handleTouchMove(e)}  
                 onTouchEnd = {e => this.handleTouchEnd(e)}></div>);
    }
}
export default Slider;

不過好像上面這個的可擴展性的利用很少見？

如果我的問題是毫無意義的對不起，如果我想知道是否有任何精神或原理是利用這樣的擴展性？ 利弊？

Answer 1

是的，您可以將變量直接附加到組件的this 。 在您的用例中是正確的。

在React 的文檔本身，在狀態和生命周期部分，它給出了一個直接在this中存儲計時器 id 的示例：

 componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); }

注意我們是如何保存的計時器ID正確this 。

雖然this.props是由 React 自己設置的，而且this.state有一個特殊的含義，但如果你需要存儲一些不用於視覺輸出的東西，你可以手動向類中添加額外的字段。

如果你不在render()使用某些東西，它就不應該在 state 中。

我們將拆除componentWillUnmount()生命周期鈎子中的計時器：

 componentWillUnmount() { clearInterval(this.timerID); }

至於Gleb Kost 的回答，我同意這是一種正常做法。

你已經搞定了。 如果在 props 和 state 中都沒有意義，請隨意將其直接附加到this ，如果它也有意義。

Answer 2

看來那擴展性this在反應成分通常的做法是，我已經看到了它在幾乎每一個或多或少復雜的使用作出反應的項目，我有工作。

至於決定把數據放在 state 的什么地方，還是放在組件本身上，我通常會問自己一個問題：組件是否需要對這些屬性的變化做出反應？ 如果是，它們將進入狀態，如果不是 - 在組件上。

在您的情況下，由於您僅在事件處理程序中使用這些屬性，並且每次更改時都不需要組件重新渲染，因此我認為最好的方法是像您一樣使用this 。

另一方面，如果您想在 render 方法中使用beingTouched屬性，例如，在觸摸時更改組件的背景顏色，而不需要將其置於狀態，否則組件不會按預期做出反應，因為它不會意識到該屬性已更改。