Рубрики
Без рубрики

Повторное использование логики компенсации реагирования с компонентом высшего порядка

Автор оригинала: johnson chinonso.

Овладение

Компоненты более высокого порядка – отличный шаблон, который оказался очень ценным. Реагировать подчеркивает состав по наследству, что делает его простым, чтобы составить больший компонент, используя меньшие.

В этом посте мы подробно рассмотрим, как использовать компонент высшего порядка в повторном использовании кода и логической абстракции.

Каковы более высокий компонент заказа?

Компонент более высокого порядка – это функция, которая принимает компонент и возвращает новый компонент.

Этот шаблон обычно реализован как функция, которая в основном является классовой фабрикой.

Реагистрирование использует компоненты более высокого порядка (HOCS) в качестве альтернативы наследству. Аналогично функциям более высокого порядка, которые принимают или возвращают другие функции

const EnhancedComponent = higherOrderComponent(wrappedComponent)

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

Что я могу сделать с HOCS?

HOC может быть использован для

  • Повторное использование кода и логическое абстракция
  • Реквизит манипуляции
  • Государственная абстракция и манипуляция
  • Оказать угон

В этой статье мы сосредоточимся на повторном использовании кода и о том, как мы можем использовать компоненты более высокого порядка как альтернативы наследству

Проблема

Допустим, у вас есть OnClick и Одежда для событий Onchange Доступ к государству, и вы планируете использовать этот обработчик событий в кучу разных компонентов. Вы могли бы, конечно, создать много дублированного кода. Помните правило, не повторяйте себя (сухой).

Допустим, у вас есть сигнал и компонент регистрации

Signin Component.

class SignIn extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
           email: '',
           password: '',
           name: '',
          };
         this.handleInputChange = this.handleInputChange.bind(this);
         this.handleOnSubmit = this.handleOnSubmit.bind(this);
       }
     handleInputChange(event) {
        this.setState({
          [event.target.name]: event.target.value
        });
     }
    handleOnSubmit(event) {
      event.preventDefault();
      const { email, password } = this.state;
      const userObj = {
         email,
         password
       }  
      this.props.signIn(userObj);
    }
   render() {
     const { email, password } = this.state;
     return (
       

          
 Sign In 

          
           
           
           
           
             
           
       



export default connect(null, { signIn })(SignIn);

Зарегистрироваться Компонент

import React from 'react';

class SignUp extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
           email: '',
           password: '',
           username: '',
           name: ''
         };
         this.handleInputChange = this.handleInputChange.bind(this);
         this.handleOnSubmit = this.handleOnSubmit.bind(this);
      }
     handleInputChange(event) {
        this.setState({
          [event.target.name]: event.target.value
        });
     }
     handleOnSubmit(event) {
       event.preventDefault();
       const { email, password } = this.state;
       const userObj = {
         email,
         password,
         name
       }  
      this.props.signIn(userObj);
     }
    render() {
       const { 
          email, 
          password,
          name,
          username
        } = this.state;
       return (
        

          
 Sign Up

          
           
           
           
           
           
           
            
           
           
       



export default connect(null, { signUp })(SignUp);

Вы заметите что-то преимущественную об этом двум компонентам, есть повторение кода. Если мы хотим ввести обработчик событий OnClick и обработчики событий Onchange в произвольные компоненты без избыточности, HOC идеален.

Создание компонента более высокого порядка

Перед созданием компонента более высокого порядка нам придется сломать наши компоненты в контейнерные и презентационные компоненты

В этом мире компоненты могут быть классифицированы в те, которые получают доступ к глобальному государству, а те, которые не имеют.

Контейнерный компонент: Компонент контейнеров – это компоненты, которые имеют прямой доступ к глобальному состоянию I.E, подключенный к магазину Redux. Они также предоставляют данные и поведение презентационным или другим компонентам контейнера. Они часто являются государственной, так как они имеют тенденцию служить источниками данных.

Предварительная компонент: также называются функциональными компонентами они R Имеют свое собственное состояние (когда они делают, это государство пользовательского интерфейса, а не данные). Y записывается как функциональный компонент, если они не нуждаются в состоянии, крючки жизненного цикла или оптимизации производительности.

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

Signin Component.

import React from 'react';

function SignIn(props) {
  const {oChange, onSubmit, showSignup } = props;
  return (
    

        
 Sign In 

        
         

         
         

         
     

      
 Don't have an account? Signup
      

    );
}

export default SignIn

Регистрация компонента

import React from 'react'

function SignUp (props) {
  const {onSubmit, onChange, showSignin} = props
  return (
    

        
 Sign Up

        
         
         
         
         
         
          
         
         
     

      
 Already have an account? Signin
      

     )
}

export default SignUp;

Отображение и оформление при щелчке переключателей между Signin и компонентом регистрации.

Теперь, когда мы изменили наш компонент, следующая вещь, которую мы собираемся сделать, это создать компонент более высокого порядка

Компонент высшего порядка (HOC)

import React from 'react';

function authenticate(WrappedComponent) {
  class Authenticate extends React.Component {
    constructor(props) {
      super(props);
      this.state = {};
      this.onInputChange = this.onInputChange.bind(this);
      this.submit = this.submit.bind(this);
    }

    onInputChange(event) {
      event.preventDefault();
      const inputName = event.target.name;
      const inputValue = event.target.value;
      this.setState({ [inputName]: inputValue });
    }

    submit() {
      this.props.onSubmit(this.state);
    }
    
    render() {
      const { onSubmit, ...otherProps } = this.props;
      return ();
    }
  }

  return Authenticate;
}

export default authenticate;

Важная часть вот в том, что метод рендера Возвращает Реагнийный элемент типа Ворванкомпонент. Мы также передаем реквизиты HOC получает.

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

Следующее, что мы собираемся сделать, – это разместить систему и компонент регистрации в одном компоненте, этот компонент будет называться index.jsx, он будет служить компонентом контейнера для двух компонентов

Индекс компонента

import React from 'react';
import SignIn from './SignIn';
import SignUp from './SignUp';
import {signInUser, signUpUser} from '../actionCreators'
import authenticate from './authenticate';

const SignUpForm = authenticate(SignUp);
const SignInForm = authenticate(SignIn);


class Authentication extends React.Component {
 
  constructor(props) {
    super(props);
    this.state = {
      userAccess: true,
    };
    this.toggleForm = this.toggleForm.bind(this);
  }
 
  toggleForm() {
    this.setState({
      userAccess: !this.state.userAccess
    });
  }

  render() {
    const { signInUser, signUpUser } = this.props;
    return (
      

        {
          this.state.userAccess ?
          (
            
          ) :
          (
            
          )
        }
      

    );
  }
}


export default connect(
 null, 
 {signUpUser, signInUser}
)( Authentication);

Здесь мы абстрагировали всю нашу логику в HOC и передаем ее до обернутого компонента, который является нашими компонентами входа и регистрации. Мы создаем компонент более высокого порядка, просто проходив в компоненте для обертывания.

const EnhancedComponent = higherOrderComponent(wrappedComponent)

Теперь можно использовать где угодно зарченокомпонент Использовался ранее, так как он вернул компонентную упаковку ворчанкомпонанс.

Имейте в виду – в большинстве случаев HOC вернет что-то, что выглядит как оригинальный компонент. Для достижения этого вам часто приходится проходить пропорты HOC и остальные статические методы, которые могут существовать в оригинальном компоненте.

Вы можете найти больше информации об этом в конце статьи Facebook.

Заключение

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

Я надеюсь, что после прочтения этого поста вы знаете немного больше о React Hocs. Они очень выразительны и доказали, что они довольно хороши в разных библиотеках.

Читайте ещё по теме: