React.js 通信

问题

React.js 通信

1. ⽗⼦通信

⽗组件通过 props 传递数据给⼦组件，⼦组件通过调⽤⽗组件传来的函数传递数据给⽗ 组件，这两种⽅式是最常⽤的⽗⼦通信实现办法。

这种⽗⼦通信⽅式也就是典型的单向数据流，⽗组件通过 props 传递数据，⼦组件不能 直接修改 props ， ⽽是必须通过调⽤⽗组件函数的⽅式告知⽗组件修改数据。

2. 兄弟组件通信

对于这种情况可以通过共同的⽗组件来管理状态和事件函数。⽐如说其中⼀个 兄弟组件调⽤⽗组件传递过来的事件函数修改⽗组件中的状态，然后⽗组件将 状态传递给另⼀个兄弟组件

3. 跨多层次组件通信

如果你使⽤ 16.3 以上版本的话，对于这种情况可以使⽤ Context API

// 创建 Context，可以在开始就传⼊值
const StateContext = React.createContext()
class Parent extends React.Component {
    render () {
        return (
            // value 就是传⼊ Context 中的值
            <StateContext.Provider value='yck'>
                <Child />
            </StateContext.Provider>
        )
    }
}
class Child extends React.Component {
    render () {
        return (
            <ThemeContext.Consumer>
            // 取出值
            {context => (
                name is { context }
            )}
            </ThemeContext.Consumer>
        );
    }
}

4. 任意组件

这种⽅式可以通过 Redux 或者 Event Bus 解决，另外如果你不怕麻烦的 话，可以使⽤这种⽅式解决上述所有的通信情况

更多面试题

如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。

这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！