React学习:组件 & Props
组件从概念上类似于 JavaScript 函数。它接受任意的入参(即 props
),并返回用于描述页面展示内容的 React 元素。
01 函数组件
下面的函数是一个有效的 React 组件,因为它接收唯一带有数据的props
对象与并返回一个React元素
。这类组件被称为函数组件,因为它本质上就是 JavaScript 函数。
// 函数组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 推荐使用箭头函数
const Welcome = (props) => {
return <h1>Hello, {props.name}</h1>;
};
02 class 组件
同时还可以使用 ES6 的 class 来定义组件:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
03 渲染组件
- 之前看到的 React 元素都只是 DOM 标签,不过 React 元素也可以是用户自定义的组件。当 React 元素为用户自定义组件时,它会将 JSX 所接收的属性(attributes)以及子组件(children)转换为单个对象传递给组件,这个对象被称之为
props
。 - 组件可以在其输出中引用其他组件,即就能用同一组件来抽象出任意层次的细节。按钮,表单,对话框,甚至整个屏幕的内容:在 React 应用程序中,这些通常都会以组件的形式表示。
单个组件
// 定义函数组件
const Welcome = (props) => {
return <h1>Hello, {props.personName}</h1>;
};
// 使用函数组件
const element = <Welcome personName='Sara' />;
// 渲染组件
ReactDOM.render(element, document.getElementById('root'));
组合组件
// 定义函数组件
const personCard = (props) => {
// 将 传递的数据 解构出来
const {info} = props;
return (
<div>
<h1>Hello, {info.personName}</h1>
<p>{info.age}</p>
<span>{info.hobby}</span>
<img src={info.personImg}>
</div>
);
};
// 使用函数组件
const infoList = [
{personName:'Peppa',age:18,hobby:'reading',personImg:'/peppa.png'},
{personName:'George',age:20,hobby:'sing',personImg:'/george.png'},
{personName:'Sara',age:12,hobby:'dancing',personImg:'/sara.png'},
]
const element = (
<>
<personCard info={infoList[0]} />
<personCard info={infoList[1]} />
<personCard info={infoList[2]} />
</>
);
// 渲染组件
ReactDOM.render(element, document.getElementById('root'));
04 Props 的只读性
- 组件无论是使用函数声明还是通过 class 声明,都决不能修改自身的 props。
- 应用程序的 UI 是动态的,并会伴随着时间的推移而变化,所以可以用新定义的变量来接收 props 里的数据,去修改这个新变量。
- 或者使用
state
,在不违反上述规则的情况下,state 允许 React 组件随用户操作、网络响应或者其他变化而动态更改输出内容。