React组件间传值的方法有哪些？

得分点

props、context、发布/订阅。

参考答案

标准回答

React中组件之间的传值方法有很多，按照不同的组件间关系可以把组件传值的方法分为父子组件传值，跨级组件传值和非嵌套关系组件传值。父子组件常用的传值方法是当父组件给子组件传值时通过props，子组件向父组件传值通过回调函数来传值。跨级组件常用的传值方法是props一层一层的传，或者使用context对象，将父组件设置为生产者而子组件都设置对应的contextType即可。非嵌套关系组件传值的方法是使用共同的父级组件进行props传值，或者通过context传值，推荐使用发布/订阅的自定义事件传值。

加分回答

React中组件间传值方法有很多，按照不同的组件间关系可以把组件间传值的方法分为：

• 父子组件传值：父子组件传值是最常见的应用场景也是非常简单的一种通信方式，父组件通过向子组件传递props，子组件得到props之后做处理就行。而子组件向父组件传值需要通过回调函数触发，具体操作是父组件将一个函数作为props的属性传递给子组件，子组件通过this.props.xxx()调用父组件的函数，参数根据需要自己进行搭配即可。
• 跨级组件传值：跨级的组件之间传值无非就是重复多个父子组件传值的过程。一般跨级的传值方式有两种，分别是：
  • 一层一层的传递props：写法很复杂，耦合程度也很高，如果两个组件之间隔了很多层，那么也会影响中间组件的性能，开销大。不过这种方法也是可以的，如果组件之间的层级不是非常多，可以考虑使用这个方法。
  • context对象：context相当于一个全局的变量，是一个大的容器，可以把需要传递的数据放在这个容器中，不论嵌套多深都可以轻易的使用。具体操作是创建一个context对象，需要输入默认值。在父组件中使用生产者标签将需要传值的所有子组件包裹起来。子组件通过指定contextType获取到这个context对象，直接调用this.context即可获得值。
• 非嵌套关系组件传值：就是没有任何包含关系的组件之间的传值，包括了兄弟组件。对于肺嵌套关系组件传值一般用两种方法：
  • 通过相同的父组件传值：子组件通过回调函数的形式将数据传给父组件，父组件直接通过属性将数据传递给子组件。
  • context：利用共同的父组件context对象进行传值
  • 通过发布/订阅进行传递：也可以说是自定义事件。重点是在子组件的componentDidMount生命周期通过声明一个自定义事件，然后在componentWillUnmount生命周期组件销毁时移除自定义事件。

延伸阅读

自定义事件传值方法：

A.js
componentDidMount() {
    this.eventEmitter = emitter.addListener('call',(msg) => {
        this.setState({
            msg
        })
    })
}
componentWillUnmount() {
    emitter.removeListener(this.eventEmitter)
}
B.js
call = () => {
    emitter.emit('call','It's me!)
}

自定义事件通过向事件对象上添加监听器和触发事件来实现组件间传值。