组件&Props
跟着官网上的尝试过五子棋例子的,应该能看懂官网上的这么一段介绍:
组件可以将UI切分成一些的独立的、可复用的部件,这样你就只需专注于构建每一个单独的部件。
组件从概念上看就像是函数,它可以接收任意的输入值(称之为“props”),并返回一个需要在页面上展示的React元素。
的确,React开发时,你可以设计一个一个小型的组件,再把这些组件组合起来,就能构建复杂的页面了。
函数定义/定义组件类
定义一个函数就像定义一个javascript
函数一样:
function Welcome(parameter){
return <h1>{parameter.title}</h1>
}
定义一个组件有点像面向对象编程中的编写一个类的继承一样,其实是很像:
class World extends React.Component{
render(){
return <h1>{this.props.title}</h1>
}
}
class
在React
中被当作关键字来使用了,这里是不是很像定义了一个类World
,该类继承了React.Component
类,并重写了其中的render()
方法。
组件渲染
上面我们遇到的React元素都是DOM标签,其实组件调用,组件调用,是这么调用的:
class Example extends React.Component{
render(){
return (
<h1>{this.props.title}</h1>
);
}
}
ReactDOM.render(
<Example title='组件调用演示'/>,
document.getElementById("root")
);
组件名称必须以大写字母开头!!!
组合组件
组件与组件之间也是可以直接调用的,例如上面我们创建了组件Welcome
,下面我们就在一个新的组件App
中调用该组件:
class App extends React.Component{
render(){
return(
<div>
<Welcome title='第一个组件' />
<Welcome title='第二个组件' />
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById("root")
);
警告:
组件的返回值只能有一个根元素。这也是我们要用一个<div
来包裹所有<Welcome />
元素的原因。
组件提取
拿官网上的例子来说,假设我们要返回的一个渲染结果很复杂,如下面所示:
function Common(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>
);
}
不用深究其中的内容了,只要知道如何把上面那团乱麻解开就行了:
function Avatar(props){
return (
<img className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name}
/>
);
}
function UserInfo(props){
return(
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfo-name">
{props.user.name}
</div>
</div>
);
}
function Common(props){
return (
<div>
<UserInfo user={props.author}/>
<div className='Commom-text'>
{props.text}
</div>
<div className='Common-date'>
<!--这里的formateDate是javascript的原生函数-->
{formateDate(props.date)}
</div>
</div>
);
}
Props的只读性
我们上面使用过this.props.Parameter
来读取过用户的输入,但是记住!只能读取用户的输入,不能修改this.props.Parameter
的值,就是不能给他赋值,这是React的严格规则!