首页 » JavaScript » 正文

【React进阶实践指南】摘要

发表于: PHP,JS,Golang,Shopify学习交流博客 – 咪啪咪啪的小木屋 · 2021-12-15 ·  526 views  ·  0 replies 

选自React进阶实践指南 https://juejin.cn/book/6945998773818490884

React 一共有 5 种主流的通信方式:

props 和 callback 方式
ref 方式。
React-redux 或 React-mobx 状态管理方式。
context 上下文方式。
event bus 事件总线。

1. props和callback方式

props和callback可以作为React组件最基本的通信方式,父组件可以通过props将信息传递给子组件,子组件可以通过执行props中的回调函数callback来触发父组件的方法,实现父与子的消息通讯。

父组件->通过自身state改变,重新渲染,传递props->通知子组件
子组件->通过调用父组件props方法->通知父组件

/* 子组件 */
function Son(props){
    const {  fatherSay , sayFather  } = props
    return <div className='son' >
         我是子组件
        <div> 父组件对我说:{ fatherSay } </div>
        <input placeholder="我对父组件说" onChange={ (e)=>sayFather(e.target.value) }   />
    </div>
}

/* 父组件 */
function Father(){
    const [ childSay , setChildSay ] = useState('')
    const [ fatherSay , setFatherSay ] = useState('')
    return <div className="box father" >
        我是父组件
       <div> 子组件对我说:{ childSay } </div>
       <input placeholder="我对子组件说" onChange={ (e)=>setFatherSay(e.target.value) }   />
       <Son fatherSay={fatherSay}  sayFather={ setChildSay }  />
    </div>
}

event bus事件总线

当然利用 eventBus 也可以实现组件通信,但是在 React 中并不提倡用这种方式,我还是更提倡用 props 方式通信。如果说非要用 eventBus,我觉得它更适合用 React 做基础构建的小程序,比如 Taro。接下来将上述 demo 通过 eventBus 方式进行改造。

«上一篇: :下一篇»

0 thoughts on “【React进阶实践指南】摘要”

  1. 还没有任何评论,你来说两句吧

Leave a reply