什么是组件：用于实现局部功能的可重用代码片段，比如很多界面都会用到“分页”功能，那么可以封装成一个独立的component这样，使用分页的界面只需要引入组件，无需重写代码1.定义组件React中有两种组件，一种是函数组件，一种是类组件。1.1函数组件定义组件最简单的方式就是写JavaScript对于React，可以返回一个React元素的函数称为组件functionMyComponent(){return
我是一个函数组件
;}在线代码1.2类组件类组件的声明过程会比较繁琐，需要使用class和extends关键字继承React.Component{}render()函数，返回该类实例要创建的元素。classMyComponentextendsReact.Component{render(){return
我是类组件
;}}网上的代码，无论是函数组件还是类组件，在React中都是等价的，只是类组件有更多的特性2渲染组件同一个组件用在不同的界面，可能想要显示不同的内容。例如，我们的自定义组件包含一个h2标签。如果我们想在两个不同的界面中显示函数和类怎么办？管理？你可以在使用组件的时候添加属性，react会将添加的属性转换成一个对象传递给组件。这个对象被称为“道具”。函数组件和类组件可以通过“形式参数”和实例属性来使用这个对象，比如：functionMyComponent(props){console.log(props)return
我是一个函数组件
;}ReactDOM。render(
,document.getElementById("root"));classMyComponentextendsReact.Component{render(){console.log(this.props);return
我是类组件
;}}ReactDOM.render(
,document.getElementById("root"));两者都输出相同的对象：在线代码所以我们可以传入不同的属性让组件呈现不同的内容：functionMyComponent(props){return
我是一个{props.name}组件
;}ReactDOM渲染（
,document.getElementById("root"));下面是这个例子中发生的事情：我们调用ReactDOM.render()函数并传入
React调用MyComponent组件作为参数并将{name:'customfunction'}作为props传入.MyComponent组件返回
Iamacustomfunctioncomponent
元素。ReactDOM高效地将DOM更新为
我是自定义函数组件
。3请注意，组件名称必须以大写字母开头。传入属性值是字符串和数字的区别：Numbers:
Strings:
多个属性可以使用扩展运算符constobj={name:'React',age:18}
注意在线代码中不能省略{}3CompositeComponentsComponents可以在其输出中引用其他组件例如，我们可以创建一个可以呈现Welcome的App组件多次Component:functionWelcome(props){return
Hello,{props.name}
;}functionApp(){return(
);}ReactDOM.render(
,document.getElementById('root'));这使得我们可以使用同一个组件来构建不同的层新组件在线代码4Extractcomponent对于一个复杂的组件，我们应该尽量将其拆分成更小的组件，以提高其可维护性和可读性。例如，参考下面的评论组件：alt={props.author.name}/>
{props.author.name} 