# day_02_todolist

**Repository Path**: zhang-rongyan/day_03_todolist

## Basic Information

- **Project Name**: day_02_todolist
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-22
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## React组件通信

#### **父传子**

父组件通过props向子组件传递数据。

**子组件**

```
import React from 'react';
impot ProTypes from 'prop-types';

export default functiom Child({ name }){
  	return <h1>Hello,{name}</h1>;
}

Child.propTypes = {
  name:PropTypes.string.isRequired,
};
```

父组件

```javascript
impor React, {Component} from 'react';
impot Child from './Child';

class Parent extends Component{
  render(){
    return(
    	<div>
           <Child name="Sara" /> 
        </div>
    )
  }
}

export default Parent;
```

#### 子传父

1、利用回调函数 

2、利用自定义事件机制

#### 兄弟组件通信

利用二者共同父组件进行通信，但是采用组件间共同的父级来进行中转，会增加子组件和父组件之间的耦合度，如果组件层次较深的话，找到二者公共的父组件不是一件容易的事。

安装events依赖

```javascript
npm install events
```

新建events.js文件并向外提供一个事件对象，供通信时使用；

```javascript
import { EventEmitter } from "events";
export default new EventEmitter();
```

## 组建的生命周期

当组件第一次被渲染到DOM中的时候，这在React中被称为“挂载（mount）".

同时，当DOM中组件被删除的时候，这在React中被称为”卸载（unmount）“。

我们可以为class组件声明一些特殊的方法，当组件挂载或卸载时就会去执行这些方法叫做”生命周期方法“。

**React 组件生命周期**

- **组件将要挂载时触发的函数：componentWillMount**

- **组件挂载完成时触发的函数：componentDidMount**

- **是否要更新数据时触发的函数：shouldComponentUpdate**

- **将要更新数据时触发的函数：componentWillUpdate**

- **数据更新完成时触发的函数：componentDidUpdate**

- **组件将要销毁时触发的函数：componentWillUnmount**

- **父组件中改变了props传值时触发的函数：componentWillReceiveProps**

  ​