React 组件的数据挂载方式

组件的数据挂载方式

React中数据分为两个部分

1. 属性
2. 状态
   经验： 频繁变化的就写成状态

属性(props)

props是正常从外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props

类组件属性挂载方法

外部传入写法:

// 定义一个father组件

import React, { Component } from 'react'
import Son from './Son'
class Father extends Component{
// static defaultProps={
// money:1000
// }
render(){
return(
<div>
<h3> 父组件 </h3>
{/* <p>father内部自己的属性：{this.props.money}</p> */}
<hr/>
<Son name="Shirley Xu"/> //在父组件的模板以标签形式写入子组件
</div>
)
}
}
export default Father

// 定义一个son组件

import React, { Component } from 'react'
class Son extends Component{
render(){
return(
<div>
<h3> 子组件 </h3>
<p> { this.props.name }</p>
</div>
)
}
}
export default Son

import React from 'react';
import './App.css';
import Father from './component/Father' // 引入父组件
function App() {
return (
<div className="App">
<Father></Father>
{/* 在app组件中以标签形式写入父组件 */}
</div>
);
}
export default App;

内部设置写法：

// 定义一个father组件
import React, { Component } from 'react'
import Son from './Son'
class Father extends Component{
static defaultProps={// 父组件上用static defaultProps 来定义父组件的属性
money:1000
}
render(){
return(
<div>
<h3> 父组件 </h3>
<p>father内部自己的属性：{this.props.money}</p>
{/* 父组件上直接访问内部属性 */}
<hr/>
<Son name="Shirley Xu"/>
</div>
)
}
}
export default Father

import React from 'react';
import './App.css';
import Father from './component/Father' // 引入父组件
function App() {
return (
<div className="App">
<Father></Father>
{/* 在app组件中以标签形式写入父组件 */}
</div>
);
}
export default App;

属性是描述性质、特点的，组件自己不能随意更改。
之前的组件代码里面有props的简单使用，总的来说，在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件 props 对象的键值。通过箭头函数创建的组件，需要通过函数的参数来接收props:

函数式组件属性挂载方法

// 定义一个father组件
import React, { Component } from 'react'
import Son from './Son'
const Content=(props)=>{
// 函数式组件中不需要使用this,因为可以通过props接收外部传入的属性
// 函数式组件不能设置自己的属性，只能通过外部传入的属性
return <h1> { props.money } </h1>
}
class Father extends Component{
static defaultProps={
money:1000
}
render(){
return(
<div>
<h3> 父组件 </h3>
<p>{this.props.money}</p>
<hr/>
<Son name="Shirley Xu"/>
<hr/>
<Content money="10000"></Content&g