Question

有什么区别

const container = {
    elm    : document.querySelector('.container'),
    height : parseInt(window.getComputedStyle(this.elm).getPropertyValue('height')),
    width  : parseInt(window.getComputedStyle(this.elm).getPropertyValue('width'))
}

对我来说，它的工作原理相同，并且我使用class App extends Component { open = false render () { <Button onPress=(() => { this.open = false}) /> } } class App extends Component { constructor() { this.state({ open: false }) } render () { <Button onPress=(() => { this.setState({ open: true })}) /> } }时没有状态，并且从未遇到过问题。

Answer 1

this.open指的是App类的属性，而this.state指的是如果您使用React，它是指组件的本地状态。

this.setState({ open: true })将更新状态并重新渲染您的组件，而this.open = false不会触发任何重新渲染

Answer 2

这是因为您没有在open方法中使用render。更改状态会使用不同的数据重新渲染组件，而类属性则不会。

为了更好地理解两者之间的区别，您可以尝试单击以下两个类中的按钮：

class App extends Component {
   open = false

   render () {
     let isOpen = "Not open"
     if (this.open) {
         isOpen = "Open!"
     }
     return (<View><Button onPress=(() => { this.open = false}) /><Text>{isOpen}</Text></View>)
   }
}

class App extends Component {
   constructor() {
     this.state({
        open: false
     })
   }

   render () {
     let isOpen = "Not open"
     if (this.state.open) {
         isOpen = "Open!"
     }
     return (<View><Button onPress=(() => { this.setState({ open: true })}) /><Text>{isOpen}</Text></View>)
   }
}

React中this.varable和this.state.variable有什么区别

2 个答案: