React 组件之props基础

　　******  如看到此篇博客，且谨慎，仅自己理解，可能有误，切勿被误导

　　1、定义组件

/*方法1   函数定义组件*/
function Welcome (props) {
     return <h1> Hello, {props.name}</h1>
}

/*方法2   ES6 class 定义组件*/
class Welcome extends React.Component {
      render () {
            return <h1> Hello, My name is {this.props.name} , {this.props.age} years old.</h1>
      } 
}   

　    2、jsx声明React元素：

const element = (
     <Welcome name="caroly" age="24" />           
)

 　　3、Babel转译器 将JSX 转换成名为 React.createElement() 的方法并调用

const  element = React.createElement (
      'welCome',
      {'name': 'caroly', age: '24'},
      'Hi, caroly'
);

　　4、React.createElement()  方法首先检查bug，之后返回一个类似的对象

const  element  =  {
     type: 'welCome',
     props: {
           name: 'caroly',
           age: '24',
           children: 'Hi, caroly'
    }
};

　　5、将React元素渲染到根DOM节点中，通过 ReactDom.render() 的方法

ReactDOM.render(
　　element, 
　　document.getElementById('root') 
)

　　** 完整代码

class Welcome extends React.Component {
      render () {
            return <h1> Hello, My name is {this.props.name} , {this.props.age} years old.</h1>
      } 
} 

/* React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件，这个对象称之为“props” */
const element = (
     <Welcome name="caroly" age="24" />           
)
ReactDOM.render(
　　element, 
　　document.getElementById('root') 
)

 

　　例子中发生了什么：

　　1、 对<Welcome name="caroly" age="24" /> 元素调用  ReactDOm.render() 方法。

　　2、React将  {name: 'caroly, age: '24'}  作为 props 传入并调用 Welcome 组件。

　　3、Welcome 组件 将 <h1> Hello, My name is {this.props.name} , {this.props.age} years old.</h1> 元素作为结果返回。

　　4、React DOM  将 DOM 更新为 Hello, My name is caroly ,24years old.

 

　　组件名称必须以大写字母开头。

　　组件的返回值只能有一个根元素。

　　例如，<div /> 表示一个DOM标签，但 <Welcome /> 表示一个组件，并且在使用该组件时你必须定义或引入它。