尝试理解此javascript源代码

我正在阅读以下react代码：

const AppWithNavigationState = connect(state => ({
   nav: state.nav,
 }))(({dispatch, nav}) => (
   <Root navigation={addNavigationHelpers({ dispatch, state: nav })}/>
 ));

const-AppWithNavigationState=connect（状态=>({
nav:state.nav，
}))（（{dispatch，nav}）=>(
));

我不太明白上面的代码。尤其是这一行

上面的代码等于下面的代码吗

class AppWithNavigation extends Component{

  render(){
    return (<Root navigation={this.props.addNavigationHelpers.bind(this)}/>);
  }

}
const mapStateToProps = (state) => {
  return {
    nav: state.nav,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    addNavigationHelpers: (nav)=>{
      dispatch(addNavigationHelpers(nav))
    }

  }
}

const AppWithNavigationState = connect(mapStateToProps, mapDispatchToProps)(AppWithNavigation);

class AppWithNavigation扩展了组件{
render（）{
返回（）；
}
}
常量mapStateToProps=（状态）=>{
返回{
nav:state.nav，
}
}
const mapDispatchToProps=（调度）=>{
返回{
addNavigationHelpers：（导航）=>{
调度（添加导航助手（nav））
}
}
}
const AppWithNavigationState=connect（mapStateToProps，mapDispatchToProps）（AppWithNavigation）；

您看到的很可能不是JavaScript代码，而是JSX的反应。您可以在React文档中找到关于JSX的更多信息

在本例中，

Root

似乎是另一个React组件，回调

mapNavigationHelpers

作为

navigation

传递/绑定到该组件

见： - -

这可能更具可读性

您还会问下面的代码是否与上面的代码相同。事实并非如此。我将重点比较两个根组件：

<Root navigation={this.props.addNavigationHelpers.bind(this)}/>

---

此组件将addNavigationHelpers函数作为组件的道具。它不会调用addNavigationHelpers函数并发送返回值，但会发送函数本身

如果我使用的是短版本，我可以在

AppWithNavigationState

class上添加移动方法吗？

{ dispatch: dispatch, state: nav }

<Root navigation={this.props.addNavigationHelpers.bind(this)}/>