### 1.1 定义组件 #### 1.1.1 函数式组件 > 最简单的定义组件的方法是写一个 JavaScript 函数: ``` function Welcome(props){ return <h1>Hello, {props.name}</h1> } ``` - 这个函数是一个有效的 React 组件，因为它接收一个 props 参数, 并返回一个 React 元素。 我们把此类组件称为”函数式(Functional)“组件， 因为从字面上看来它就是一个 JavaScript 函数。 - 函数式组件又称为`无状态组件`，因为这类组件只用来做静态展示，因此没有state属性，交互也相对较少。 #### 1.1.2 类组件 ``` class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } ``` #### 1.1.3 综合示例 ``` # App.js(定义两个组件) import React,{Component} from 'react' function ComEle(props){ return <h1>函数式组件{props.name}</h1> } class Ele extends Component{ render(){ return (<h1>类声明组件,{this.props.name}</h1>) } } export {ComEle,Ele} # index.js (渲染组件) import React,{Component} from 'react' import ReactDOM from 'react-dom' import {Ele,ComEle} from './App' class App extends Component{ render(){ return (<div> <Ele name="jack"/> <ComEle name="hello" /> </div>) } } ReactDOM.render(<App />,document.getElementById('root')) ``` > 注意： > 如上 **ComEle函数** 是一个函数式组件，当React遇到一个代表用户定义组件的元素时，它将JSX属性以一个单独对象的形式传递给相应的组件（props对象） > 其渲染过程如下： 1. 我们调用了ReactDOM.render()方法并向其中传入了 **\<ComEle name="hello"\ /\>** 2. React调用ComEle组件，并向其中传入了{name:'Sara'} 作为props对象 3. ComEle组件返回 **\<h1\>函数式组件{props.name}\<\/h1\>**