Я использую response.js для создания своего спа-приложения. Я использую функциональный стиль для создания своих компонентов. По мере того, как бизнес-логика становится больше, неизбежно появляется много функций. Поэтому я попытался разделить на несколько компонентов. Потому что сложно поместить много кодов в один файл, даже если это всего лишь один компонент.

Однако и здесь есть очевидные ограничения. В случае сложных компонентов существует большое количество функций обратного вызова событий в дополнение к функциям, непосредственно вызываемым пользователем. В зависимости от размера компонента иногда сложно записать всю логику в один файл jsx, поэтому я хочу разделить код на разные файлы по мере необходимости. (Как частичный класс С #)

Однако это непросто. В качестве примера предположим, что функции обратного вызова сделаны внешними функциями других файлов и импортированы в этот компонентный файл jsx и используются. Но кажется, что состояния компонентов, информация о свойствах и функция диспетчеризации также должны передаваться в качестве параметров функции. Это кажется хлопотным, но, кроме этого, я понятия не имею, как получить доступ к состояниям этого компонента, реквизитам, функции диспетчеризации из функции в другом файле.)

//For example of callback function
const onHoldButtonClicked = (state, props, dispatch, event) =>
{
    ~~~
}
//For example of normal function
const updateValidUser = (state, props, dispatch, userInfo, data) =>
{
    let id = userInfo.id;
    if(id == data.passID)
    {
         if(props.valid == 10)
            dispatch({action: 'ChangeUser', user: id});
    }
}

В React, как разделить логику (функции), когда логика увеличивается в одном компоненте? (В общем случае) Даже если он разделен на несколько компонентов, большой компонент неизбежно выполняет множество функций.

0
HelloWorld 30 Окт 2020 в 15:44

3 ответа

Лучший ответ

Я бы рекомендовал извлекать логику в хуки и помещать эти хуки в свои собственные файлы.

Hook.js

const useAwesomeHook = () => {
  const [someState, setSomeState] = useState("default");

  const myCoolFunction = useCallback(() => {
    console.log('do smth cool', someState);
  }, [someState]);

  return myCoolFunction;
};

export default useAwesomeHook;

Main.js

import useAwesomeHook from './hook';

const Main = ({ someProperty }) => {
  const myCoolFunction = useAwesomeHook(someProperty);

  return <button onClick={myCoolFunction}>Click me</button>;
};
2
Julian Kleine 2 Ноя 2020 в 09:20

Я разделяю компоненты на логику и пользовательский интерфейс по композиции функций. Идея пришла из перекомпоновки, которую я использовал до хуков. вступил в реакцию. вы можете добавить две вспомогательные функции. первый - compose, вы можете узнать об этом подробнее здесь:

    const compose = (...fns) => x => fns.reduceRight((y, f) => f(y), x);
    export default compose;

Второй - withHooks:

    import React from 'react';
    export default (hooks) =>
    (WrappedComponent) =>
    (props) => {
        const hookProps = hooks(props);

        return (
            <WrappedComponent
                {...props}
                {...hookProps}
            />
        );
    }

С помощью этих двух функций вы можете поместить свою логику в файл hooks и передать в качестве реквизита свой пользовательский интерфейс с помощью файла compose. Вы можете увидеть пример песочницы здесь

1
Linton Samuel Dawson 30 Окт 2020 в 14:17

Обычно я создаю папку для большого компонента, в этой папке я создаю файл функций и помещаю функции с переданным состоянием и другими необходимыми параметрами. так просто, как, что .

export const increment=(count,setCount)=>{...}
.
.

И в вашем компоненте

import{increment,....} from './functions'
const Component=(props)=>{
  const [count,setCount]=useState(1)
  return <div>
    <button onClick={e=>increment(count,setCount)}> count ={count}</button>
</div>
}
1
سعيد 30 Окт 2020 в 13:28