@fluentui-react-native/use-slots (英语)
以高效、可插接和可定制的方式将组件分层组合起来的模式和框架.
在构建组件库时,更大型更复杂的组件往往由更小更集中的组件来构建. 这在概念上是巨大的,因为它能够很好地区分各种关切,并能够进行更好和更模块化的设计。 此分层中的边界不仅由您组件的定义定义, 无论是函数还是基于类的组件, 而且由 React.createElement编辑 createElement 电话是JSX的合成糖 并且为钩子之类的东西提供分层.
问题是这种层层也增加了间接费用。 在构建HOC时,JSX树上元素的数量可以远远大于DOM中所渲染出的实际原始人的数量. 虽然可以通过直接调用来使一个函数组件,但如果该组件包含钩子,则必须谨慎行事. 钩子的存储实际上是一个从上一个索引的数组 createElement 电话 如果有的话 useState 电话会在一次传票上发出 但是在下一次被跳过 之后所有的钩子通话都会错位.
分阶段组件
要可靠地解决函数组件的这个问题,就必须将钩子呼叫与元素树生成区分开来. 这个软件包的图案是写出使函数返回一个会返回JSX树的续作函数. 这一模式如下:
const twoPartRender = (props: MyProps) => {
// do the hook calls in this section */
const theme = React.useContext(ThemeContext);
const [state, setState] = React.useState(() => doSomeStateSetup()));
// now return a (props) or (props, children) or (props, ...children) function that finishes the render
return (additional: MyProps, ...children: React.ReactNode[]) => {
const merged = { ...props, ...additional };
return (<View {...merged}>{children}</View>)
}
}
stagedComponent
这种类型的函数不能单独识别为一个组件. 此软件包导出一个帮助函数 stagedComponent 两者:
- 将两个部分使函数变成可以识别的组件
- 添加框架访问初始两个部分函数的手段, 如果它知道如何处理它
帮手会回来的 React.FunctionComponent 将道具(没有孩子)转发给第一个呼叫,然后将孩子传递给继续功能.
已淘汰阶段组件
分阶段组件可由人工消耗。 这看起来像是:
// create the BaseComponent as a staged component, this can still be rendered via <BaseComponent />
const BaseComponent = stagedComponent(/* some implementation */);
// create a wrapper component
const WrapperComponent = stagedComponent((props) => {
// grab the children, do some prop transformations, etc.
const { children, ...rest } = props;
const propsForBase = doSomethingWithProps(rest);
// call the first part of the function
const continuation = BaseComponent._staged(propsForBase);
// now render that component just by calling the function
return continuation({}, children)
}
注意在此例子中 WrapperComponent 正在调用 BaseComponent 但不创建一个专用的树条。 同时 WrapperComponent 它本身可以作为分阶段的组成部分加以实施.
通过一个 useSlots 钩子
传统发展