React 组件间通信介绍

你的名字 2021-12-16 12:17 327阅读 0赞

# React 组件间通信方式简介 #

--------------------

React 组件间通信主要分为以下四种情况：

*  父组件向子组件通信
 *  子组件向父组件通信
 *  跨级组件之间通信
 *  非嵌套组件间通信

下面对这四种情况分别进行介绍：

### 父组件向子组件通信 ###

父组件通过 props 和子组件进行通信，子组件得到 props 后进行相应的操作   
父组件 App.js:

1.  `import React, { Component } from 'react';`
2.  `import './App.css';`
3.  `import Child1 from './Child1';`
4.  ``
5.  `class App extends Component {`
6.  `render() {`
7.  `return (`
8.  `<div className="App">`
9.  `<Child1 content="父组件传递的内容" />`
10. `</div>`
11. `);`
12. `}`
13. `}`
14. ``
15. `export default App;`

子组件 Child1.jsx

1.  `import React, { Component } from 'react';`
2.  ``
3.  `class Child1 extends Component {`
4.  `render () {`
5.  `return (`
6.  `<div>`
7.  `子组件一：{ this.props.content }`
8.  `</div>`
9.  `)`
10. `}`
11. `}`
12. ``
13. `export default Child1;`

### 子组件向父组件通信 ###

和父组件向子组件通信类似，父组件通过传递 props 给子组件，只不过 props 的内容是一个函数，子组件通过调用父组件传递过来的回调函数，将子组件内容传递给父组件。   
父组件 App.js

1.  `import React, { Component } from 'react';`
2.  `import logo from './logo.svg';`
3.  `import './App.css';`
4.  `import Child1 from './Child1';`
5.  `import Child2 from './Child2';`
6.  ``
7.  `class App extends Component {`
8.  `constructor(){`
9.  `super();`
10. `this.state = {`
11. `msg:'',`
12. `}`
13. `}`
14. `childMsg(msg){`
15. `this.setState({`
16. `msg: msg,`
17. `})`
18. `}`
19. `render() {`
20. `return (`
21. `<div className="App">`
22. `子组件二传过来的内容：{ this.state.msg}`
23. `<Child2 childMsg={ this.childMsg.bind(this)}/>`
24. `</div>`
25. `);`
26. `}`
27. `}`
28. ``
29. `export default App;`

子组件 Child2.jsx:

1.  `import React, { Component } from 'react';`
2.  ``
3.  `class Child2 extends Component {`
4.  `msgHandle(){`
5.  `this.props.childMsg(this.refs.input.value);`
6.  `}`
7.  `render () {`
8.  `return (`
9.  `<div>`
10. `子组件二：`
11. `<input type="text" placeholder='请输入内容' ref='input' />`
12. `<button onClick={ this.msgHandle.bind(this)}>点击向父组件传参</button>`
13. `</div>`
14. `)`
15. `}`
16. `}`
17. ``
18. `export default Child2;`

### 跨级组件通信 ###

跨级组件是指父组件向子组件的子组件进行通信，或者向更深层次的子组件通信，主要有两种方式：

*  通过 props 层层传递
 *  使用 context 对象

对于层级不深的组件（三层以内），可以使用 props 进行层层传递，如果说层级更深的话，   
每一层组件都要去传递 props，并且这些 props 可能不是自身需要的，这就增加了复杂度，这种场景就可以使用 context 进行通信。context 是一个全局变量，相当于一个大容器，我们把要传递的信息放到这个容器里面，不管嵌套层级多深，子组件都可以获取到信息。使用 context 需要满足以下三个条件：   
1、父组件需要声明自己支持 context，并提供 context 对象中属性的 PropTypes   
2、子组件需要声明自己需要使用 context，并提供其需要使用的 context 属性的 PropTypes。   
3、父组件需要提供一个 getChildContext 函数，用来返回一个初始的 context 对象

props 层层传递：   
父组件App.js:

1.  `import React, { Component } from 'react';`
2.  `import logo from './logo.svg';`
3.  `import './App.css';`
4.  `import Child1 from './Child1';`
5.  ``
6.  `class App extends Component {`
7.  `constructor(){`
8.  `super();`
9.  `}`
10. `render() {`
11. `return (`
12. `<div className="App">`
13. `<Child1 content="父组件传递给孙子组件的内容" />`
14. `</div>`
15. `);`
16. `}`
17. `}`
18. ``
19. `export default App;`

Child1.jsx:

1.  `import React, { Component } from 'react';`
2.  `import Child1_1 from './Child1_1';`
3.  ``
4.  `class Child1 extends Component {`
5.  `render () {`
6.  `return (`
7.  `<div>`
8.  `<Child1_1 content={ this.props.content}/>`
9.  `</div>`
10. `)`
11. `}`
12. `}`
13. ``
14. `export default Child1;`

Child1\_1.jsx:

1.  `import React, { Component } from 'react';`
2.  ``
3.  `class Child1_1 extends Component {`
4.  `render () {`
5.  `return (`
6.  `<div>`
7.  `子组件一的子组件：{ this.props.content }`
8.  `</div>`
9.  `)`
10. `}`
11. `}`
12. ``
13. `export default Child1_1;`

context 对象传递   
父组件App.js:

1.  `import React, { Component } from 'react';`
2.  `import logo from './logo.svg';`
3.  `import './App.css';`
4.  `import PropTypes from "prop-types";`
5.  `import Child1 from './Child1';`
6.  ``
7.  `class App extends Component {`
8.  `// 声明支持 context`
9.  `static childContextTypes = {`
10. `msgs: PropTypes.string,`
11. `callBack: PropTypes.func,`
12. `}`
13. `// 父组件提供一个函数，返回初始的 context 对象`
14. `getChildContext(){`
15. `return {`
16. `msgs:'父组件传递的初始内容',`
17. `callBack:this.callBack`
18. `}`
19. `}`
20. `callBack(msgs){`
21. `console.log(msgs);`
22. `}`
23. ``
24. `render() {`
25. `return (`
26. `<div className="App">`
27. `<Child1 />`
28. `</div>`
29. `);`
30. `}`
31. `}`
32. ``
33. `export default App;`

子组件 Child1.jsx:

1.  `import React, { Component } from 'react';`
2.  `import Child12 from './Child1_2';`
3.  ``
4.  `class Child1 extends Component {`
5.  `render () {`
6.  `return (`
7.  `<div>`
8.  `<Child12 />`
9.  `</div>`
10. `)`
11. `}`
12. `}`
13. ``
14. `export default Child1;`

子组件的子组件 Child1\_2:

1.  `import React, { Component } from 'react';`
2.  `import PropTypes from 'prop-types';`
3.  ``
4.  `class Child1_2 extends Component {`
5.  `// 子组件声明需要调动 context`
6.  `static contextTypes = {`
7.  `msgs:PropTypes.string,`
8.  `callBack:PropTypes.func`
9.  `}`
10. `callBack(){`
11. `this.context.callBack('孙子组件的信息');`
12. `}`
13. `render () {`
14. `return (`
15. `<div>`
16. `子组件一的子组件：{ this.context.msgs }`
17. `<button onClick={ this.callBack.bind(this)}>点击给爷爷组件传递信息</button>`
18. `</div>`
19. `)`
20. `}`
21. `}`
22. ``
23. `export default Child1_2;`

### 非嵌套组件间通信 ###

表示没有任何包含关系的组件，主要包括兄弟组件和不在同一个父级中的非兄弟组件。

*  使用共同父组件的 context 对象通信
 *  使用自定义事件的方式

对于使用共同父组件 context 的方式会增加子组件和父组件之间的耦合度，对于层级较深的组件找到共同父组件也比较麻烦，但是这种方式可实施。

为了避免父子组件之间的耦合度，我们采用自定义事件的方式：   
需要安装 events 包，使用该模块的自定义事件机制`npm i events --save`   
在根目录下新建 events.js 文件：

1.  `import { EventEmitter } from 'events';`
2.  ``
3.  `export default new EventEmitter();`

父组件 App.js:

1.  `import React, { Component } from 'react';`
2.  `import logo from './logo.svg';`
3.  `import './App.css';`
4.  `import Child1 from './Child1';`
5.  `import Child2 from './Child2';`
6.  ``
7.  `class App extends Component {`
8.  `render() {`
9.  `return (`
10. `<div className="App">`
11. `<Child1 />`
12. `<Child2 />`
13. `</div>`
14. `);`
15. `}`
16. `}`
17. ``
18. `export default App;`

子组件 Child1.jsx:

1.  `import React, { Component } from 'react';`
2.  `import emitter from './events';`
3.  ``
4.  `class Child1 extends Component {`
5.  `constructor(props){`
6.  `super(props);`
7.  `this.state = {`
8.  `msg:''`
9.  `}`
10. `}`
11. `// 组件挂载完后，声明一个自定义事件`
12. `componentDidMount(){`
13. `this.eventEmitter = emitter.addListener('selfEventName',msg => {`
14. `this.setState({`
15. `msg: msg`
16. `})`
17. `})`
18. `}`
19. `// 组件销毁前清除事件监听`
20. `componentWillUnmount(){`
21. `emitter.removeListener(this.eventEmitter)`
22. `}`
23. `render () {`
24. `return (`
25. `<div>`
26. `子组件二传递过来的内容：{ this.state.msg }`
27. `</div>`
28. `)`
29. `}`
30. `}`
31. ``
32. `export default Child1;`

子组件 Child2.jsx:

1.  1.  `import React, { Component } from 'react';`
    2.  `import emitter from './events';`
    3.  ``
    4.  `class Child2 extends Component {`
    5.  `msgHandle(){`
    6.  `emitter.emit('selfEventName','自定义事件传参');`
    7.  `}`
    8.  `render () {`
    9.  `return (`
    10. `<div>`
    11. `子组件二：`
    12. `<button onClick={ this.msgHandle.bind(this)}>点击向父组件传参</button>`
    13. `</div>`
    14. `)`
    15. `}`
    16. `}`
    17. ``
    18. `export default Child2;`

转载于:https://www.cnblogs.com/web-panpan/p/10486395.html