这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天

学习笔记

React的学习2

React的组件

组件是React开发的基础。在React的组件构成中，按照状态来分可以分为有状态组件和无状态组件。
无状态组件，就是没有状态控制的组件，只做纯静态展示的作用，无状态组件是最基本的组件形式，它由属性props和渲染函数render构成。复用性也最强。
有状态组件是在无状态组件的基础上增加了组件内部状态管理，有状态组件通常会带有生命周期lifecycle，用以在不同的时刻触发状态的更新，有状态组件被大量用在业务逻辑开发中。

目前，React支持三种方式来定义一个组件，分别是：

• ES5的React.createClass方式
• ES6的React.Component方式
• 无状态的函数组件方式

通过组件化，来对应用进行更加简易的管理。

<div id="example"></div>




function HelloMessage(props) { 
return <h1>Hello World!</h1>; 
} 
const element = <HelloMessage />; 
ReactDOM.render( element, document.getElementById('example') 
);

复合组件： 通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。

<div id="example"></div>






function Name(props) {
	return <h1>名称：{props.name}</h1>;
}
function Nickname(props) {
	return <h1>小名：{props.nickname}</h1>;
}
function Fullname() {
	return (
	<div>
		<Name name="青训" />
		<Nickname nickname="qingxun" />
	</div>
	);
}

ReactDOM.render(
	 <Fullname />,
	document.getElementById('example')
);

React的组件通讯

React的组件是独立且封闭的单元，一般情况下，只能使用组件自己的数据。
在组件化的过程当中，将一个完整的功能拆分成为多个组件，通过这样的"解体"，以便能够更好的完成所需要开发的应用功能。
因为在拆分之后，还是要完成一个应用的功能，所以在组件之间也是需要共享某一些数据。
而实现这些功能，这个过程就叫做组件的通讯。

四种常用的组件通讯方式：

• 父子组件之间
• 兄弟组件之间
• 跨组件层级
• 跨级组件通讯