React之路--组件和自定义组件

想要构建强大的React应用,只是使用React自带的组件是远远不够的,还得依靠强大的自定义组件来支撑;

组件可以将UI切分成一些的独立的、可复用的部件,这样你就只需专注于构建每一个单独的部件。

react组件返回一个需要在页面上展示的React元素(还是元素),也就是说是需要由返回值的,这里的React元素,区别于DOM元素,前者可能会因为组件嵌套的影响,出现一些自定义的元素,注意区分;例如:

function Welcome(props) {
    return (
        <div>
        	{props.name}
			<h1>Hello, {props.name}</h1>
		</div>
    );
} //定义组件

const element = <Welcome name="Sara" />; //自定义组件
ReactDOM.render(
    element,
    document.getElementById('container')
); //渲染

针对上面的代码,我的理解是,当渲染的时候React发现element是一个自定义组件,于是就将该组件的jsx属性name=“Sara”当作一个名为props对象(props={name:"sara"}),并传递给了Welcome函数,并最后返回一个DOM元素, 进行渲染。

1.对<Welcome name="Sara" />元素调用了ReactDOM.render()方法。
2.React将{name: 'Sara'}作为props传入并调用Welcome组件。
3.Welcome组件将<h1>Hello, Sara</h1>元素作为结果返回。
4.React DOM将DOM更新为<h1>Hello, Sara</h1>。

当React遇到的元素是用户自定义的组件,它会将JSX属性作为单个对象("{}")传递给该组件,这个对象称之为“props”。也就是说在自定义组件中出现的属性是props对象中的一个键值对;所有的React组件必须像纯函数那样使用它们的props,也就是说props是只读的。

组件名称必须以大写字母开头;

组合组件:

组合组件,组件可以在它的输出(return)中引入其他组件,通过这样的嵌套组合的关系,来构造你能想象出的任意的细节;

function Tophead() {
    return (
        <div>
        	<Abs name = "张三" age = "23" />
        	<Abs name = "李四" age = "24" />
        	<Abs name = "王五" age = "25" />
        </div>
    );
}

function Abs(props) {
    return <i>hello,大叫好我叫{props.name},今年{props.age}岁了</i>
}

ReactDOM.render(
    <Tophead />,
    document.getElementById("sub_container0")
)
在函数Tohead()中返回的是React元素,同理Abs()中也是, 但是无论怎么组合,怎么嵌套,渲染都页面上的都是DOM元素;
通常,一个新的React应用程序的顶部是一个App组件,虽然不一定名字一定是App,但说明了一个道理,组件的嵌套一定有一个顶部组件,
要有一个头儿;
对于组件的嵌套你可以从最外层的组件(render的是哪个组件是,谁就是最外层)开始分析之,由外及里,一层层的分析;

组件分离

从大的组件中分离出独立的、可复用的小组件,在从比较复杂的组件中提取出可复用的组件的时候,首先要看一下这个大的组件中的props的结构是啥,有哪些属性,对应的属性值是啥?如果这个props中的有一个属性是对象,那么就可以把含有这个属性的元素给分离出来(纯属个人见解)




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值