React 组件

一、创建组件
1.使用方法名
（1）使用函数定义一个组件,方法名就是组件名。
function Name(){

使用函数定义的组件

}
(2) 为用户定义的组件，把组件的名称以标签的形式放到页面上即可。
const element = < Name/>
（3）渲染组件
ReactDOM.render(
Name,
document.getElementById(“root”)
);
//当用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。
2.使用class来创建组件。
class Movie extends ReactDOM.Component {
render() {
return

render是一个实例方法

}}
注：ReactDOM.Component、render()两个都不能少
ReactDOM.render(
//相当于Movie类的一个实例，new。
document.getElementById(“root”);
)
3.组合组件。
（1）我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。
4.提取组件
（2）将各自功能点进行分离

二.传递参数，用props。
const person = {
name:“jack”
}
使用组件，并向组件传递props参数：且props是只读的。

在传递参数中，***接受***外界传过来的参数：
function Name(props){

使用函数定义的组件 {props.name}

}
const element = < Name name=“jack”/>
ReactDOM.render(
element,
document.getElementById(“root”)
);
（2）当使用class创建组件的时候，不想接受参数，直接通过this.props来访问。
class Name extends ReactDOM.Component {
render(){
return

{this.props.name}

// class 内部，this指向当前组件的实例对象

总结：

区别：
（1）用构造函数创建出来的组件，没有私有属性和state和生命周期，只有props。，访问参数props.name
（2）用class创建的组件，有私有属性和生命周期。访问参数用this.props.name。
本质区别：有无私有属性、state、生命周期