Question

我们可以简单地描述 this.props 是来自父组件的数据流， this.state 用于保持组件的当前状态，以及我们大量的机制我们在React中开发的依赖是在 setState（）之后重新渲染。

如果对这两者的使用理解可能没有大问题，除了保持函数对象之外，利用 this 的可扩展性来保持一些被视为全局变量的值是否合适？

例如，如果我想要轻扫＆＃39;在我的组件上可用的方式，我可以做类似的事情：

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's Documentation本身，在状态和生命周期部分，它给出了一个直接在this中存储计时器ID的示例：

componentDidMount() {
  this.timerID = setInterval(
    () => this.tick(),
    1000
  );
}
请注意我们如何在this上保存计时器ID。

虽然React本身设置了this.props，this.state具有特殊含义，但如果您需要存储未用于视觉效果的内容，则可以手动向该类添加其他字段输出

如果您不使用render()中的内容，则不应该处于该状态。

我们将在componentWillUnmount()生命周期钩子中删除计时器：
componentWillUnmount() {
  clearInterval(this.timerID);
}

从Gleb Kost's answer开始，我同意这是正常做法。

你已经钉了它。如果在道具中没有任何意义，在状态下，如果它也有意义，可以随意将它直接附加到this。

Answer 2

似乎反应组件this的可扩展性是一种常规做法，我已经看到它几乎用于我所研究过的每一个或多或少复杂的React项目。

至于决定将数据放在状态或组件本身的位置，我通常会问自己一个问题：组件是否需要对这些属性的更改做出反应？如果是，他们将进入该状态，如果不是 - 在组件上。

在您的情况下，由于您仅在事件处理程序中使用这些属性，并且每次更改时都不需要重新呈现该组件，我说最佳将是使用{{1和你一样。

另一方面，如果您想在渲染方法中使用this属性，例如，要更改组件触摸时的背景颜色，而不是需要将其放入状态，否则组件不会按预期反应，因为它不会意识到属性已经改变。

正确利用＆＃34;这个＆＃34;的可扩展性。在React组件中

2 个答案: