React定义变量的三种方式及区别

2,367 阅读1分钟

方法1

在Class之外定义的状态(函数组件中):使用const关键字定义的变量,如const a = xx。这种方式定义的状态是常量,一旦初始化后,其值在组件的整个生命周期中不会发生改变。这种状态是针对整个组件的,不会受到组件的重新渲染影响。

方法2

在Class组件内部使用state定义的状态:使用state关键字定义的变量,如state = { b: xx }。这种方式定义的状态是可变的,可以通过setState方法来更新其值。当组件的状态发生变化时,React会自动重新渲染组件,并更新相关的UI。这种状态是类组件特有的,通过this.state来访问。

方法3

在Class组件内部render方法外部定义的状态:直接使用变量定义的状态,如c = xx。这种方式定义的状态也是可变的,但与state定义的状态有所不同。当这种状态发生变化时,组件不会自动重新渲染,因为React无法跟踪这种状态的变化。如果想要使组件重新渲染以反映状态的变化,需要手动调用this.forceUpdate()方法。

总结

  • 在Class之外定义的状态是常量,不会随组件的重新渲染而改变。
  • 在Class组件内部使用state定义的状态是可变的,通过setState方法更新,并触发组件的重新渲染。
  • 在Class组件内部render方法外部定义的状态也是可变的,但需要手动调用forceUpdate方法触发组件的重新渲染。
//方法1 
const a = xx 
export default class Home extends Component{ 
    state:{ 
        //方法2 
        b:xx 
    } 
    //方法3 
    c=xx 
}