react笔记（1）父子组件通信

最近做了一个pc项目，技术选型为react，中间涉及到了各种状态管理、消息传递，做个小小的笔记记录下，方便以后做同类项目可以快速起步。

项目使用框架版本

1
2
3
4
5
6
7
{
  "dependencies": {
    "@babel/preset-react": "^7.9.4",
    "react": "^16.12.0",
    "webpack": "4.41.0",
  }
}

父组件传递消息给子组件

父组件可以向子组件通过传 props 的方式进行通信。
子组件Child.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from "react";

export default class Child extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            name:'ginny is a child',
            message:''
        }
    }

    render(){
      const {name} = this.state;
      const {message} = this.props;
        return(
            <div className="component-child">
                <div>{name}</div>
                <div>{message}</div>
            </div>
        )
    }
}

父组件Father.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from 'react';
import Child from './Child'

export default class Father extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            name:'I am father',
            message: 'Here is a message'
        }
    }

  render() {
    const {message} = this.state;
    return (
      <div className="component-father">
        <Child message={message}></Child>
      </div>
    );
  }
}

子组件传递消息给父组件

子组件向父组件通讯，也是通过父组件向子组件传递 props 进行通讯，只是父组件传递的，是作用域为父组件自身的函数。子组件调用该函数，把想要传递的信息以参数的方式传递给父组件。
在子组件Child中绑定 onClick 事件。 调用 change 方法，在change方法中调用父组件的 childClick 方法。
子组件Child.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React from "react";

export default class Child extends React.Component{
    constructor(props){
        super(props);
        this.state={
            name:'ginny is a child',
            messageFromChild:'Here is a message from ginny!'
        }
    }

    change = (msg) => {
        this.props.childClick(msg);
    }

    render(){
      const {name, messageFromChild} = this.state;
      const {message} = this.props;
        return(
            <div className="component-child">
                <div>{name}</div>
                <div>{message}</div>
                <button onClick={this.change.bind(this, messageFromChild)}>点击</button>
            </div>
        )
    }
}

父组件Father.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React from 'react';
import Child from './Child'

export default class Father extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            name:'I am father',
            message: 'Here is a message'
        }
    }
  childClickHandle = (msg) => {
    console.log('Message form child is:' + msg);
  }

  render() {
    const {message} = this.state;
    return (
      <div className="component-father">
        <Child message={message} childClick={this.childClickHandle}></Child>
      </div>
    );
  }
}

函数this指向

本项目中涉及到各种函数调用，所以最后对 this 的指向问题稍微加一个小小的总结。
非箭头函数：
(1) this 指向调用其所在函数的对象（离其最近的对象）；
(2) 构造函数下，this与被创建的新对象绑定；
(3) DOM事件，this指向触发事件的元素；
(3) 当函数通过Function对象的原型中继承的方法 call 和 apply 方法调用时， 其函数内部的this值可绑定到 call和apply 方法指定的第一个对象上， 如果第一个参数不是对象，JavaScript内部会尝试将其转换成对象然后指向它；
(4) 通过bind方法绑定后， 函数将被永远绑定在其第一个参数对象上， 而无论其在什么情况下被调用；
(5) 当代码被内联处理函数调用时，它的this指向监听器所在的DOM元素；
(6) 当代码被包括在函数内部执行时，其this指向等同于 函数直接调用的情况，即在非严格模式指向全局对象window， 在严格模式指向undefined；
(7) 对于延时函数内部setTimeout和setInterval的回调函数的this指向全局对象window。
箭头函数：
(8) 箭头函数不绑定this， 它会捕获其所在（即定义的位置）上下文的this值， 作为自己的this值，call,apply,bind方法对于箭头函数来说只是传入参数，对它的this 无影响；

在本项目中，如果组件触发自身的方法，需要将方法写成箭头函数的形式，这样调用的时候就会指向自身，可以获取自身的state等等属性。如果不写成箭头函数，只是普通函数，则在绑定函数的地方需要使用this.change.bind(this)，把组件当前的this绑定在函数上。