react学习：组件&props

定义组件

1.函数定义组件：（此函数为有效的React组件，它接收一个单一的“props”对象并返回了一个React元素）

function Welcome（props） {

　　return  <div>hello , {props.name}</div>

}

2.使用es6的class进行定义

class Welcome extends React.Component(

　　render(

　　　　return <div>hello , {this.props.name}</div>

　　)

)

小结：两种定义在react中是一样的。

 

组件渲染

react元素可以是自定义的组件

　　function Welcome (props){

　　　return  <div>hello , {props.name}</div> 

　　}

　　const element = < Welcome name="小可爱" />; // 此时界面显示的应该是：hello，小可爱

　　ReactDOM.render（

　　　　element ，

　　　　document.getElementById（“root”）

　　）

注：组件名称必须以大写字母开头。（用于区分DOM标签和自定义组件）

组件可以嵌套组件，但是注意：组件的返回值只能有一个根元素。

组件提取

和vue一样，相似东西可以适当提取出来作为组件，省去重复代码

Props的只读性

 无论是使用哪种组件声明（函数定义/es6定义），都不可以改变他的props