Javascript 函数参数中的分解工作原理

我试图寻找这个，但到目前为止没有运气。我已经看过了网络上的信息分解。我不明白这种局部的破坏模式

const App = ({todos, actions}) => (
  <div>
    <Header addTodo={actions.addTodo} />
    <MainSection todos={todos} actions={actions} />
  </div>
)

const-App=（{todos，actions}）=>(
)

---

{todos，actions}在函数的param定义中做什么？它从哪些TODO和操作中提取出来？

如果调用

App

像

App（{todos:10，actions:{addTodo:addTodoFunction}}}）

在

App

函数中，参数

todo

和

actions

分别被分配给

10

和

{addTodo:addtofunction}

。因此，

actions.addTodo

变成了

addTodoFunction

。更多信息，请参见。

这些是对组件进行反应的道具：

<App todos={...} actions={...} />

因此，您可以编写您的组件，而无需进行如下分解：

const App = (props) => (<div>
  <Header addTodo={props.actions.addTodo} />
  <MainSection todos={props.todos} actions={props.actions} />
</div>)

const-App=（道具）=>(
)

React将道具作为对象传递给组件，而destructuring从对象中提取属性，因此它是一种快捷方式

您还可以通过两个步骤来分解道具：

const App = (props) => {
  const { todos, actions } = props
  return (<div>
    <Header addTodo={actions.addTodo} />
    <MainSection todos={todos} actions={actions} />
  </div>)
}

const-App=（道具）=>{
const{todos，actions}=props
返回(
)
}

---

注意，在最后一种情况下，您必须使用大括号并显式返回，因为arrow函数中有多个语句。

ok不知道您可以调用这样的函数。基本上，这和我的想法是一样的。如果您的react组件是一个ES6类，那么我猜它会像这样发送：导出默认类MyComponent（{someProp{{……}这样调用函数没有什么特别的-这只是一个以对象作为其唯一参数的函数调用。神奇之处在于函数定义，它现在能够对传递的对象进行分解。在ES6之前，您需要执行

function（obj）{var todos=obj.todos，actions=obj.actions；…}

明白了，谢谢！我没有意识到像这样的函数参数调用会进行解构。我现在明白了。是的，不知怎的，我错过了“从作为函数参数传递的对象中提取字段”这一节。酷。