React学习之让组件和属性齐飞(三)
组件就是让你可以独立于 1.函数式组件(又称功能型组件)和类组件看标题大家就知道函数式组件是什么鬼了,也就是组件的开发,简单地说就是写一个函数,如下: function We(props) {
return <h1>Hello,{props.name}</h1>;
}
因为它遵循组件的特性,即输入一个 当然,重点戏到啦,那就是我们亲爱的 class We extends React.Component {
render() {
return <h1>Hello,{this.props.name}</h1>;
}
}
从一定的观点上看,函数式组件和类组件是等价的 2.视图展示组件内容在我前两篇博客中,我们只知道用 const e1 = <div />;
const e2 = <img />;
const e3 = <p />;
如今学了上面两种组件方式后,我们终于可以解放啦,我们可以用组件来填充 const el = <We name="tm7" />;
那我们的 当 function We(props) {
return <h1>Hello,{props.name}</h1>;
}
/** class We extends React.Component{ render(){ return <h1>hello,{this.props.name}</h1> } } **/
const el = <We name="tm7" />;
ReactDOM.render(
el,document.getElementById('root')
);
组件元素定义的 3.构造复合组件复合,就是融合多个组件,在一个组件中调用另外一些组件,获得那些组件的输出,然后再输出。 function We(props) {
return <h1>Hello,{props.name}</h1>;
}
function App() {
return (
<div>
<We name="tm7" />
<We name="jxy" />
<We name="cxl" />
</div>
);
}
ReactDOM.render(
<App />,document.getElementById('root')
);
如果你想在一个已经存在的应用中增加别的组件的话,除了,前一篇文章说的:另选一个根节点可以重新处理(其实这种方式不算是增加到已有应用中)外,所谓的应用其实是一个大型 这里还要说的是,每一个 同时我们组件返回的一定是一个 //true
return (<div>
<h1>tm7</h1>
<h1>jxy</h1>
</div>
);
//false
return (
<h1>tm7</h1>
<h1>jxy</h1>
);
4.尽可能提纯我们的代码首先我们要有个观念,不是越多的组件越好,也不是组件啥都没有就好了,适当的提取一些 实例如下: function View(props) { return ( <div className="View"> <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="View-text"> {props.text} </div> <div className="View-date"> {props.date} </div> </div> ); } ReactDOM.render( <View text="tm7" date="new Date()" author={{name:'aaa',avatarUrl:'bbb'}}/>,document.getElementById('example') );
我们可以适当的减少这一段代码,比如进行如下提取: function Avatar(props) {
return (
<img className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name}
/>
);
}
代码就变为了 function View(props) {
return (
<div className="View">
<div className="UserInfo">
<Avatar user={props.author} />
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="View-text">
{props.text}
</div>
<div className="View-date">
{props.date}
</div>
</div>
);
}
我们接着提取 function UserInfo(props) {
return (
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfo-name">
{props.user.name}
</div>
</div>
);
}
代码又简化了 function View(props) {
return (
<div className="View">
<UserInfo user={props.author} />
<div className="View-text">
{props.text}
</div>
<div className="View-date">
{props.date}
</div>
</div>
);
}
虽然提取过程是繁琐无聊的,但是当我们开发比较大的应用的时候,我们可能会重复大量相同的 5.属性对象
|