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中的有一个属性是对象，那么就可以把含有这个属性的元素给分离出来(纯属个人见解)