你能解释一下这个反应原生代码（渲染方法中的奇怪箭头函数）吗？

Posted 2023-02-21

【中文标题】你能解释一下这个反应原生代码（渲染方法中的奇怪箭头函数）吗？

【英文标题】：Can you explain this react native code (strange arrow function in render method)?

【发布时间】：2021-03-16 04:14:15

【问题描述】：

所以这是我正在阅读的教科书中的一些 React Native 代码，特别是来自 App.js 的渲染方法。当然 /* ...*/ 会填写实际代码，但这与我的问题无关。

<MeasureLayout>
        layout => (
            <KeyboardState layout=layout>
                keyboardInfo => /* … */
            </KeyboardState>
        )
</MeasureLayout>

我不明白layout => (... 发生了什么。所以我认为 layout 是一个箭头函数，它返回这个keyboardState 组件。那么layout如何在<KeyboardState layout=layout>这部分将自己传递到keyboardState的layout prop中呢？我为什么要这样做呢？这里的整个部分真的让我感到困惑。

【问题讨论】：

它叫做render prop，恰好是children prop。

【参考方案1】：

看到 inside render 方法用于一些javascript语句。

例如。

<Text>
personFirstNam +" " +personLastName
</Text>

但是现在在您的代码中 中再次包含 JSX 元素，它在未命名函数中使用。

即

layout => (
 ...// here you can use JSX element which will be returned into render method for UI.
)

或者，如果你想在那里进行一些操作，

layout =>
 let extractData = fromSomeWhere;
 let calculatePosition = getPosition();
 return (<KeyboardState layout=layout>
            keyboardInfo => /* … */
        </KeyboardState>)

所有这些都是为了在一个 JSX 元素中执行一些 JS 语句执行/操作。

【参考方案2】：

React 组件具有 props 和 children 属性。 children 属性通常是 React 节点，但也可以是返回 React 节点的函数。

---

那么在这部分，layout 是如何将自己传递到keyboardState 的layout 属性中的呢？

创建了MeasureLayout 组件，以便将其children 属性定义为函数而不是React 节点。

而我为什么要这样做呢？

用于依赖注入并作为一种模式，允许使用基于类的组件进行更具声明性的编程风格。

---

更深入的阅读：

主题：作为孩子的功能

https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9

https://codedaily.io/tutorials/6/Using-Functions-as-Children-and-Render-Props-in-React-Components

【讨论】：

我不相信它与基于类的组件有关。任何组件（函数或类）都可以从渲染道具中受益。

【参考方案3】：

<MeasureLayout> 将参数作为函数传递给它的子代。并使用箭头函数来接收它。

所以，<MeasureLayout> 的代码基本上是，

function MesauseLayout(props)
 //Do things 
 // layout = some result.
  return <div>props.children(layout)</div>

所以，为了接收这个值，孩子必须在一个接受这个值的函数中。所以，使用箭头函数来接收这个值。

<MeasureLayout>
        layout => (
            <KeyboardState layout=layout>
                keyboardInfo => /* … */
            </KeyboardState>
        )
</MeasureLayout>

但在我看来，如果可能的话，使用带有钩子的 Context/Provider 将是一个更好的选择。这通常只在极端情况下使用。还有另一个选项可以使用 React.cloneElement 并传递额外的道具。但是，如果您必须在这两者之间进行选择，则需要权衡取舍。另外，还有一个概念叫做render props，在新的库中很常用。