Javascript “可扩展性”的正确使用；这"；内反应组分

我们可以简单地描述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;

类滑块扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
运动：0，
touchStartX:0，
prevTouchX:0，
被感动：错
};  
this.handletoucstart=this.handletoucstart.bind（this）；
this.handleTouchMove=this.handleTouchMove.bind（this）；
this.handleTouchEnd=this.handleTouchEnd.bind（this）；
}
handleTouchStart（e）{
这是我的国家({
touchStartX:e.targetTouches[0]。客户端，
感动：真的
});
}
手触式（e）{
如果（此状态被触摸）{
让deltaX=e.targetTouches[0].clientX-this.state.touchStartX；
这是我的国家({
运动：deltaX，
prevTouchX:e.targetTouches[0]。客户端X
});
}
}
handleTouchEnd（东）{
//处理滑动并将状态touchStartX和beingTouched设置为0和false。
}
render（）{
return（this.handleTouchStart（e）}
onTouchMove={e=>this.handleTouchMove（e）}
onTouchEnd={e=>this.handleTouchEnd（e）}>）；
}
}
导出默认滑块；

这是我构建的应用程序的一部分，它工作得很好。但我仍然怀疑这是否是使用state属性的好方法。 或者也可以做一些类似的事情：

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;

类滑块扩展React.Component{
建造师（道具）{
超级（道具）；
这个运动=0；
这个.touchStartX=0；
这个.prevTouchX=0；
this.beingtouch=false；
this.handletoucstart=this.handletoucstart.bind（this）；
this.handleTouchMove=this.handleTouchMove.bind（this）；
this.handleTouchEnd=this.handleTouchEnd.bind（this）；
}
handleTouchStart（e）{
this.touchStartX=e.targetTouches[0].clientX；
this.beingtouch=true；
}
手触式（e）{
如果（这个被触摸）{
让deltaX=e.targetTouches[0].clientX-this.state.touchStartX；
这个运动=代尔税；
this.prevTouchX=e.targetTouches[0].clientX；
}
}
handleTouchEnd（东）{
//处理滑动并将状态touchStartX和beingTouched设置为0和false。
}
render（）{
return（this.handleTouchStart（e）}
onTouchMove={e=>this.handleTouchMove（e）}
onTouchEnd={e=>this.handleTouchEnd（e）}>）；
}
}
导出默认滑块；

但是，似乎很少看到使用上面的这个的可扩展性

---

对不起，如果我的问题没有意义，我只是想知道是否有任何精神或原则来利用此的可扩展性？优点和缺点？

在react组件中，此的可扩展性似乎是一种正常的做法，我已经看到它被用于我所从事的几乎所有或多或少复杂的react项目中

至于决定将数据放在状态或组件本身的何处，我通常会问自己一个问题：组件是否需要对这些属性的更改做出反应？如果是，则在组件上处于状态（如果不是）

在您的情况下，由于您仅在事件处理程序中使用这些属性，并且不需要每次它们更改时都重新渲染组件，因此我认为最佳的方法是像您一样使用

这个

---

另一方面，如果要在渲染方法中使用

beingtouch

属性，例如，在触摸组件时更改其背景颜色，而不是将其置于状态，否则组件将不会按预期反应，因为它将不知道该属性已更改。

是，您可以将变量直接附加到组件的

this

。这在您的用例中是合适的

就其本身而言，在状态和生命周期部分，它给出了一个直接在

中存储计时器id的示例：

请注意，我们是如何将计时器ID保存在此

上的

虽然

this.props

是由React自身设置的，并且

this.state

具有特殊意义，但是如果需要存储一些不用于视觉输出的内容，则可以向类中手动添加其他字段

如果未在

render（）

中使用某些内容，则它不应处于该状态

我们将拆除

组件willunmount（）

生命周期挂钩中的计时器：

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

到目前为止，我同意这是一种正常的做法

---

你搞定了。如果在道具中或在状态中没有意义，请随意将其直接附加到

此
，如果它也有意义的话。
Gleb Kost，非常感谢您的回答，它似乎足够清晰！很抱歉，只是等待更多的讨论，我可能会接受你的回答后！绝对地我也很想看到关于这个问题的其他意见。非常感谢你的回答和来自官方网站的例子！我想现在事情对我来说更确定了！很抱歉，我需要接受Gleb的答案，因为它是第一位的！再次感谢。@Carr我已经编辑了我的答案，还包括React对这个问题的解释。我很高兴它能帮上忙