标签: recompose

我在我的React项目中使用重构 https://github.com/acdlite/recompose/

这是一个很棒的图书馆.我正在使用该compose实用程序作为容器组件,将状态向下作为道具传递给表示组件,如下所示:

const enhance = compose(
  lifecycle({
    componentDidMount() {
      myCall
        .getResponse([productId])
        .then(products => {
          setIsReady(true);
        });
    },
  }),
  withState('isAvailable', 'setIsAvailable', false),
  withState('isReady', 'setIsReady', false),
  mapProps(({
    setIsAvailable,
    setIsReady,
    ...state,
  }) => ({
    onLogoutTouchTap: () => {
      ...

请注意其中的setIsReady(true)电话componentDidMount.这是我想要做的,但是lifecycle/componentDidMount无权访问setIsReady.如何componentDidMount通过重构来完成更新状态的预期结果？

我开始使用React JS开发Web应用程序.我从主题森林买了一个主题.在主题中,他们在组件中使用这样的组合.

...Other code here
 Login.propTypes = {
      classes: PropTypes.shape({}).isRequired,
      width: PropTypes.string.isRequired
    };

    export default compose(withWidth(), withStyles(themeStyles, { withTheme: true }))(Login);

正如您所看到的,他们的代码在导出Component时最终使用了compose.我不能修改他们的内置结构.我现在喜欢做的是我也喜欢使用反应的连接功能.

通常连接用于撰写.现在,如果我想使用connect来处理应用程序的状态,我该如何将它与compose一起使用？

我的具体目标是使用ScrollView 的ScrollTo方法,但维护功能组件结构.

更一般地,这需要获得当前组件的参考,这是裸体反应原生的.

在2016年12月重新组合添加允许withHandlers的处理程序属性是一个工厂函数,但我无法弄清楚如何正确使用它.

如何在Recompose中使用withHandlers向函数组件添加refs并在ScrollView上调用ScrollTo？

我正在尝试在React Native中添加一个函数组件的ref,以便在FlatList组件上使用scrollToEnd.

我想使用重构为此,并且正如他们的文档所述,toClass()应该能够处理这个问题.但是,没有给出任何例子.

目前,这是我失败的实施.有人能告诉我我做错了什么吗？

我非常感激!

import React from 'react';
import PropTypes from 'prop-types';
import { FlatList, View, Text } from 'react-native';
import { graphql } from 'react-apollo';
import { compose, toClass, lifecycle } from 'recompose';

import CommentItem from './CommentItem';
import { commentsQuery } from '../../queries/comments';

const CommentScreen = ({ onRef, currentUser, data: { comments, loading } }) => {
  if (loading) {
    return (
      <View>
        <Text>Loading...</Text>
      </View>
    );
  }

  return (
    <FlatList
      ref={ref => {
        this.refs.commentList = ref;
      }}
      data={comments} …

在我的React/Redux应用程序中,我经常面临实现应该在整个应用程序中使用的状态组件的问题.我们以简单的弹出组件为例,打开/关闭状态,可以在任何页面中重复使用.我找到了两种可能的方法:

• 使用setState和"本地"reducer(我使用recompose.withReducer,它只是React本机的语法糖 setState)来管理它的状态.它看起来很容易并且可以重复使用,直到您需要在页面的其他部分更改组件的状态(在外壳中关闭弹出窗口).而且你不能只是调用一些redux动作来改变状态.

• 将组件的状态保留在Redux存储中.使用这种方法,我们可以closePopupAction({ id })在组件树的任何地方调用以改变它的状态.但是我们需要以某种方式将其reducer(我想保留在弹出窗口的文件夹中)放到根减速器上,当组件被挂载时删除它.该组件已卸载.另外,我们可以在页面中添加多个弹出窗口,每个弹出窗口都有自己的状态.

有没有人面临类似的问题？

基本上,我想要这样的东西:

export type ReturnValueMapper<Func extends (...args: Args[] /* impossible */ ) => any, ReturnValue> = (...args: Args[]) => ReturnValue;

我几乎可以肯定这是不可能的,但我还没有找到确切的确认.

用例是使用stateHandlers改进重构的类型,从而可以定义状态更新器,如下所示:

interface StateUpdaters {
    update(field: string): void; // I don't want to specify Partial<State> here 
}

如何测试(使用jest+ enzyme)以下recompose用于创建HoC的代码:

import {compose, withState, withHandlers} from 'recompose'

const addCounting = compose(
  withState('counter', 'setCounter', 0),
  withHandlers({
    increment: ({ setCounter }) => () => setCounter(n => n + 1),
    decrement: ({ setCounter }) => () =>  setCounter(n => n - 1),
    reset: ({ setCounter }) => () => setCounter(0)
  })
)

执行浅渲染时,我有权访问counter和setCounter属性,如下所示:

import {shallow} from 'enzyme'

const WithCounting = addCounting(EmptyComponent)
const wrapper = shallow(<WithCounting />)

wrapper.props().setCounter(1)
expect(wrapper.props().counter).toEqual(1)

最大的问题是,如何访问处理程序(increment,decrement和 …

我是酶测试的新手,我已经制作了一个组件:

import React from 'react';
import {
  compose,
  withState,
  withHandlers,
  branch,
  pure,
  renderComponent,
} from 'recompose';

import Fields from './components/Fields';
import Flow from './components/Flow';

export const MODE = {
  preview: 'preview',
  edit: 'edit',
};

const inEditMode = ({ mode }) => mode === MODE.edit;

const Component = branch(
  inEditMode,
  renderComponent(Fields),
  renderComponent(Flow),
)(Flow);

const Tab = pure(props => <Component {...props} />);

export default compose(
  withState('mode', 'changeMode', props => {
    const path = props.path;

    return props.path ? MODE.preview : MODE.edit;
  }),
  withHandlers({ …

是否可以/安全地使用带有承诺的处理程序？例:

withHandlers({
    onChange: props => event => {
      props.callAPI(props.data)
        .then(data => props.updateData(data))
    },
...

谢谢!

在 Jetpack Compose 中，我们看到所有内置可组合项都具有扁平化输入，这是有意的吗？或者用数据类包装太多的输入（这是良好且干净的做法）具有相同的性能？

考虑这个样本

data class SettingsItemEntity(
    val title: String,
    val description: String? = null,
    @DrawableRes val imageResId: Int? = null,
    val isChecked: Boolean? = null,
    val showDivider: Boolean = true,
    val onItemClicked: () -> Unit = {},
    val onCheckedChange: (isChecked: Boolean) -> Unit = {},
    val buttonLabel: String? = null,
    val onButtonClicked: () -> Unit = {},
)

@Composable
fun SettingsItem(
    entity: SettingsItemEntity,
    modifier: Modifier = Modifier
) { 
...
}

在性能（重组）中将输入作为数据类或扁平输入发送会更好吗？或者有相同的结果？

换句话说，当我们将一个数据类发送给可组合函数时，我们只更改其中的一个成员，是否会导致整个函数重新组合？或者重组方面，它与使用扁平输入时具有相同的性能吗？

预先感谢您的帮助。