阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

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

      目录
      目录