组件的数据挂载方式
React中数据分为两个部分
- 属性
- 状态
个人经验: 频繁变化的就写成状态
属性(props)
props
是正常从外部传入的,组件内部也可以通过一些方式来初始化的设置,属性不能被组件自己更改,但是可以通过父组件主动重新渲染的方式来传入新的 props
属性是描述性质、特点的,组件自己不能随意更改。
两种设置方式:
1. 外部传入
2. 内部初始化设置
总的来说,在使用一个组件的时候,可以把参数放在标签的属性当中,所有的属性都会作为组件 props
对象的键值。通过箭头函数创建的组件,需要通过函数的参数来接收props
:
class Title extends Component {
render () {
return (
<h1>欢迎进入{
this.props.name}的世界</h1>
)
}
}
const Content = (props) => {
return (
<p>{
props.name}是一个构建UI的库</p>
)
}
class App extends Component {
render () {
return (
<Fragment>
<Title name="React" />
<Content name="React.js" />
</Fragment>
)
}
}
设置组件的默认props
import React, {
Component, Fragment } from 'react'
import ReactDOM from 'react-dom'