【React入门必备知识篇03】--- React 组件进阶

一、React 组件进阶

（1）组件通讯介绍

组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯。

（2）组件的 props

• 组件时封闭的，要接受外部数据应该通过props来实现；
• props的作用：接收传递给组件的数据；
• 传递数据：给组件标签添加属性；
• 接收数据：函数组件通过参数props接收数据，类组件通过 this.props 接收数据；

完整代码演示如下：

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  props
*/

// 2 接收数据
class Hello extends React.Component {
    render() {
        return (
            <div>
                <h1>props: {this.props.age}</h1>
            </div>
        )
    }
}

// 1 传递数据
ReactDOM.render(<Hello name="rose" age={19} />, document.getElementById('root'))