react学习6-React 组件接收数据props和类组件状态state

组件接收数据props

• 必须继承React.Component才可以成为一个类组件
• render方法的作用：产生组件的模板，属于react的核心api，名称固定
• 必须通过this.props获取父组件传递数据，是只读的，不可以修改。

class Nihao extends React.Component {
    render () {
        console.log(this.props)
        let uname = this.props.uname
        return (
            <div>
                类组件: {uname}
            </div>
        )
    }
}

类组件状态state

状态是组件私有的，并且完全被组件控制（只有类组件有状态，函数组件没有状态）。

类组件的数据来源有两个：

• 内部的状态state
  • state可以修改
  • 不要直接修改 State，使用 this.setState() 来更新类组件 state。
  • 构造函数是唯一可以给 this.state 赋值的地方。
• 父组件传递的props
  • 是只读的，不可以修改

class StateTest extends React.Component {
     constructor (props) {
       // 类组件第一行需要添加super并且传递props参数
       super(props)
       this.state = {
         info: 'nihao'
       }
     }

    // 类组件的内部状态需要使用state名称
    // 类组件状态的简化写法
    state = {
        info: 'hello'
    }

render () {
    const { info } = this.state
    const { msg } = this.props
    return (
        <div>
            <h1>有状态的组件：{info}</h1>
            <h1>有状态的组件：{msg}</h1>
        </div>
    )
  }
}