这次我们来学习React中的组件。组件是React的核心。

根据React官网的介绍，组件可以将UI切分成一些独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。

组件有两大特点：

1、 封装

2、 重用

好处

• 提高开发效率
• 方便复用
• 简化调试步骤
• 提升整个项目的可维护性
• 便于协同开发

组件的创建

组件创建有两种：

第一种

通过JavaScript函数创建(无状态组件)

// 创建组件 - 函数组件
function Parent() {
    return (
        <div>
            <h2>我是小陈同学</h2>
            <p>你好，小陈同学</p>
        </div>
    )
}

第二种

通过class创建(有状态组件)

// 创建组件 - 类组件
class Child extends React.Component {
    render () {
        return (
            <div>
               <h2>我是小陈同学</h2>
            <p>你好，小陈同学</p>
            </div>
        )
    }
}

函数组件和类组件的区别

• 接收父组件传递过来的数据方式不同

  • 函数组件 - props
  • 类组件 - this.props

• 状态

  • 函数组件没有状态
  • 类组件是有状态的，职能比较丰富具有独立的业务逻辑

• this

  • 函数组件不能访问this，若想访问的话，就得换一种创建方式
  • 类组件可以访问

• 性能

  • 函数组件性能更优，因为组件被精简成一个render方法的函数来实现的，由于是无状态组件，所以无状态组件就不会在有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升。

• 生命周期

  • 因为无状态组件是不需要组件生命周期管理和状态管理，所以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参与组件的各个生命周期管理的。

  函数组件好处，无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用

使用场景

• 推荐使用无状态组件(函数组件)，输入即输出，不会有任何的副作用

组件通信

• 从上到下

  • 在组件标签上通过自定属性（key=value）的形式，进行数据的绑定

  • 在子组件内部，如果是class组件通过this.props接收；如果是函数组件通过props接收

    只能层层一级一级往下传递，不能跨组件传递

组件通信

在父组件中定义一个带有参数的函数，然后通过自定义 属性的方式传递给子组件

import React, { Component } from 'react'
import   Baby from './baby'

class List extends Component {
    // 类的构造函数
    getChildData (val) {
        console.log(val)
    }
    render () {
        let { getChildData } = this
        return (
            <div>
                <h1>父组件 - 父子组件通信</h1>
                <Baby fun = { getChildData } />
            </div>
        )
    }
}

export default List

在子组件中接收到父组件传递过来的函数，然后通过箭头函数的形式进行执行并且传递具体的数据

import React, { Component } from 'react'

class Baby extends Component {
    render () {
        let { fun } = this.props
        return (
            <div>
                <hr/>
                <p>子组件</p>
                <button onClick={ () => { fun('123') } }>通知父组件</button>
            </div>
        )
    }
}
export default Baby