React基础 组件的状态

 有状态/无状态组件

• 有状态组件：能定义 state 的组件 ， 类组件就是有状态的组件
• 无状态组件：不能定义 state 的组件，函数组件一般叫做无状态组件

无状态组件的应用场景

• 组件本身就不需要有状态，例如渲染一段静态的内容
• 组件本身就没有状态，有可能只需要从外部传入的状态就够了

类组件状态

第一种 ： 在 constructor 中通过 this.state={}

继承的时候，子组件一旦有constructor，constructor 内部必须有super()

constructor中定义，new的时候可以传参，传参可以当作状态

import React, { Component } from 'react'

export default class App extends Component {
	constructor() {
		// 继承的时候，子组件一旦有constructor，constructor内部必须调用super()
    // constructor中定义，new的时候可以传参，传参可以当作状态
		super()
		this.state = {
			age: 18
		}
  }
	render() {
		return <div>App</div>
	}
}

第二种：通过state 来定义状态，state对应值必须是一个对象，但是不支持形参

import React, { Component } from 'react'

export default class App extends Component {
  // state={} 不支持传参
	state = {
		age: 18
	}
	render() {
		return <div>App</div>
	}
}