说到组件离不开组件间通信，以及数据与视图层的响应。

React变量

我们在类组件和函数组件中的变量明显不一样。

function App() {
  let arr = [1,2,3,4,5]
  return (
    <div className="App">
      {arr}
    </div>
  );
}

函数组件中我们直接定义变量，不允许向this上定义变量。

class xxx extends Component {
    constructor(){
        super();
        this.data={
            arr:[1,2,3,4,5]
        }
    }
    render() {
        return (
            <div>
                {this.data.arr}
            </div>
        );
    }
}

类组件中我们在函数constructor中使用this向实例定义变量，或则render函数内定义变量。

实际上这些变量都是非响应的，只会在首次加载组件时渲染时，之后修改变量值，视图层不会响应。

这里我们可以看到状态和变量的区别。状态即this.state会响应式刷新页面。

通信

我们组件间可以完成父子间的简单通信。

props通信

props通信还是区分与类组件和函数组件，本质上都是父传子。

• 类组件的通信，通过props属性接收。

//父组件
<div>
    <Son title='okkkkkkkkkk'></Son>
</div>
//子组件
<div>
    {this.props.title}
</div>

• 函数组件通信通过形参接收。（可以任意命名）

<div>
    <Son title='okkkkkkkkkk'></Son>
    <Son1 name='this is Son1'></Son1>
</div>
//子组件
const Son1 = (prop) => {
    return (
        <div>
            {prop.name}
        </div>
    );
}

• 通过扩展运算符完成多值传递。

    render() {
        let props = {
            obj: 1,
            name: 'okk'
        }
        return (
            <div>
                <Son title='okkkkkkkkkk' {...props}></Son>
                <Son1 name='this is Son1'></Son1>
            </div>
        );
    }

• 通过defaultProps设置默认传参。

class MyApp extends React.Component {
	render() {
		return <p>this is my {this.props.name}</p>
	}	
}
//由于是用ES6 class语法创建组件，其内部只允许定义方法，而不能定义属性，class的属性只能定义在class之外。所以defaultProps要写在组件外部。
MyApp.defaultProps = {
	name: 'xxx'
};

children

如下代码：

class Commod extends Component{
    render(){
        return (
            <div>
                {this.props.children}
            </div>
        )
    }
}

export default class test extends Component {
    render() {
        return (
            <div>
                <Commod>
                    {'xxx'}
                </Commod>
            </div>
        )
    }
}

这里使用组合组件写法，我们发现我们向组件标签间插入的js表达式会被组件内的props.children属性接收。

可以理解类似于vue中插槽的功能。

子通父

主要要是基于事件或控制父组件完成子向父的通信。