一、什么是组件?
组件就像JavaScript函数。它们接受任意输入(称为“道具”)并返回描述屏幕上应显示内容的React元素。
二、如何定义组件
1、定义组件的最简单的方法是编写JavaScript函数
function Welcome(props) {
return <h1>Hello,{props.name}</h1>;
}
此函数是一个有效的React组件,因为它接受单个“props”(代表属性)对象参数与数据并返回一个React元素。我们将这些组件称之为“功能组件”,它们实际上是JavaScript函数。
2、还可以使用ES6类来定义组件:
class Welcome extends React.Component{
render() {
return <h1>Hello,{this.props.name}</h1>;
}
}
三、渲染组件
以前我们只遇到代表DOM标记的React元素:
const element = <div />
但是元素也可以表示用户定义的组件:
const element = <Welcome name="Sara" />;
当React看到表示用户定义组件的元素时,他将JSX属性作为单个对象传递给此组件。我们称这个对象为“道具”。
function Welcome(props) {
return <h1>Hello,{props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
注意:React将以小写字母开头的组件视为DOM标记。始终使用大写字母启动组件名称。
四、组成组件
组件可以引用其输出中的其他组件。这使我们可以对任何细节级别使用相同的组件抽象。如下:我们可以创建一个App渲染Welcome很多次的组件:
function Welcome(props) {
return <h1>Hello,{props.name}</h1>;
}
function App(){
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahel" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
五、提取组件
不要害怕拆分成更小的组件。
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatdate(props.date)}
</div>
</div>
)
}
我们将上面的代码进行提取,首先提取Avatar:
function Avatar(props) {
return (
<img className="Avatar"
src={props.user.avatarUrl}
src={props.user.name}
/>
);
}
我们再提取一个UserInfo组件,该组件呈现Avatar用户名的下一个:
function UserInfo(props) {
return (
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfo-name">
{props.user.name}
</div>
</div>
)
}
最后Comment可以简化为:
function Comment(props) {
return (
<div>
<UserInfo user={props.author} />
<div className="Comment-text">
{props.text}
</div>
<div>
{formatDate(props.date)}
</div>
</div>
);
}
六、道具是只读的
无论是将组件声明为函数还是类,它都不能修改自己的道具。
function sum(a,b){
return a+b;
}
//这个函数称为“纯”,因为它们不会尝试更改其输入,并且始终为相同的输入返回相同的结果,相比之下,这个函数是不纯的,因为它改变了自己的输入:
funciton withdraw(account,amount){
account.total -= amount
}
所有React组件必须像其道具一样充当纯函数。