react 组件的使用

1.组件的介绍

介绍：组件就是封装起来具有独立功能的ui部件，react推荐以组件的方式去思考ui的构成，将ui每一个功能独立的功能封装成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。

组件的特点：

• 免代码冗余，提高代码利用率，组件可以重复调用

• 组件的属性props是只读的，调用者可以传递参数到props对象中定义属性

• props传递是父子组件交互的唯一方式,通过传递一个新的props属性值使得子组件重新render渲染，从而达到父子组件通讯。

• 组件必须返回一个单独的根元素

组件的优势：

• 组件可复用

• 可以封装成一个独立功能模块

• 多个组件可以组合成一个大的ui结构页面

2.组件的创建

函数组价：使JS 的函数（或箭头函数）创建的组件，函数体内要返回元素

function Hello() {
	return (
		<div>这是我的第⼀个函数组件！</div>
	)
}

// 渲染到跟组件中
render () {
	return (
		<Hello />
	)
}

注意事项：

• 函数名称必须以⼤写字⺟开头，使⽤⼤驼峰命名法

• 函数组件必须有返回值，表示该组件的结构

• 组件标签可以单闭合

类组件：使⽤ ES6 的 class关键字 创建的组件

使用：类组件应该继承 React.Component ⽗类，从⽽可以使⽤⽗类中提供的法和属性

注意：

• 类名称也必须以⼤写字⺟开头，使⽤⼤驼峰命名法

• 类组件必须提供 render() ⽅法

• render() ⽅法必须有返回值，表示该组件的结构

import React, { Component } from 'react'
import Home from './xxx/xxx/xxx'
class App extends Component {
  constructor (props) {
    super(props)
	// 第一种定义初始化数据，需要动态改变的数据
    this.state = {}
  }
	
 // 第二种定义数据的方式，就不需要再构造函数中定义
 state = {}
  render () {
    return (
     <div>
        <Home />
     </div>
    )
  }
}

export default App;

类组件和函数组件的去区别：

• 函数组件介绍父组件的参数是在函数的形参中接受，类组件是通过this.props来接受

• 类组件有this和生命周期和state，但是函数组件没有this和生命周期和state

• 类组件可以继承一些react内部自定义的功能组件，但是函数组件不可以