什么是组件

所谓组件，即封装起来的具有独立功能的UI部件(所有组件都有自己的样子）。对于React而言，开发者从功能的角 度出发，将UI分成不同的组件，每个组件都独立封装。在React中，你按照界面模块自然划分的方式来组织和编写你的代码。整个UI是一个通过小组件构成的大组件，每个组件只关心自己部分的逻辑，彼此独立

  • 在React中
    • 一个返回React元素的函数就是组件
  • 在Vue中
    • 一个构造选项就可以表示一个组件

      React元素和React组件

      ```javascript //使用Element 创建元素

const div = React.createElement(‘div’,…) //这是一个 React 元素(d小写)

const Div = ()=>React.createElement(‘div’..) //这是一个 React 组件(D 大写) //只要一个东西函数返回了一个元素,这个东西就是组件

//一个约定

//如果你是元素,你的第一个字母必须小写

//如果你是组件,你的第一个字母必须大写

  1. <a name="NIDjd"></a>
  2. ## 函数组件和类组件
  3. <a name="WmpNz"></a>
  4. ### 函数组件
  5. ```javascript
  6. //Welcome 函数名第一字母大写
  7. //(props) 接受一个props
  8. //return一个标签
  9. //<h1>Hello, {props.name}</h1>  会自动变成React.createElement('h1'....)
  11. function Welcome(props){
  12.         return <h1>Hello, {props.name}</h1>;
  13. }
  15. //使用方法
  16. //把他当标签用
  17. // name="frank" , "frank" 就是传给props的值
  18. <Welcome name="frank"/>

该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

类组件

同时还可以使用 ES6 的 class 来定义组件：

  1. //class 函数名 extends  React.Component 
  2. //固定格式
  4. //取props的值的时候一定要加上 this 
  6. class Welcome extends React.Component {
  7.     render() {
  8.             return <h1>Hello, {this.props.name}</h1>
  9.     }
  10. }
  12. //使用方法
  13. <Welcome name="frank"/>

=================================================================

  • <div /> 会被翻译为 React.createElement('div')
    • 如果是一个原生的标签像'div','span'
    • React.createElement会自动接受这个标签,变成字符串
    • 一定要注意大小写
  • <Welcome /> 会翻译为 React.createElement(Welcome)
    • Welcome就是一个函数
    • React.createElement会自动接受这个函数
    • 一定要注意大小写

React.createElement

  • 如果传入一个字符串'div' ,则会创建一个div
    • 注意这个 div 是一个虚拟的 DOM 元素,不是一个真正的 DOM 元素
  • 如果传入一个函数,则会调用该函数,获取其返回值
  • 如果传入一个类,则在类前面加个new(这会导致执行 constructor)
    • 获取一个组件对象
    • 然后调用对象的 render 方法
    • 获取其返回值