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属性，例如，在触摸时更改组件的背景颜色，而不需要将其置于状态，否则组件不会按预期做出反应，因为它不会意识到该属性已更改。