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

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

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

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

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

Прочитав Чинсонс Джонсон Статья о повторном использовании логики компонентов реагирования с HOC. Я подумал о достижении того же результата, но вместо этого используя рендер. Это то, что мы будем покрывать в этом посте.

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

Рендеринг

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

Чтобы начать, представьте, что у нас есть компонент входа и регистрации, оба обработчика события Onchange, которые меняют состояние

Signin Component.

import React from 'react';

class SignIn extends React.Component {
  state = {
    auth: {
      email: '',
      password: '',
    },
  };

  onChange = ({ target }) => {
    this.setState({
      auth: {
        ...this.state.auth,
        [target.name]: target.value,
      },
    });
  };

  onSubmit = (event) => {
    event.preventDefault();
    // do something here

    console.log(this.state.auth);
  };

  render() {
    const { email, password } = this.state.auth;
    return (
      

        
 Sign In 

        
        

        
        

        
      

    );
  }
}

export default SignIn;

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

import React from 'react';

class Signup extends React.Component {
  state = {
    auth: {
      email: '',
      password: '',
    },
  };

  onChange = ({ target }) => {
    this.setState({
      auth: {
        ...this.state.auth,
        [target.name]: target.value,
      },
    });
  };

  onSubmit = (event) => {
    event.preventDefault();
    // do something here

    console.log(this.state.auth);
  };

  render() {
    const { email, password, name, username } = this.state.auth;
    return (
      

        
 Sign Up 

        
        

        
        

        
        

        
        

        
      

    );
  }
}

export default Signup;

Как видите, повторяющиеся функции ONCHANGE и ONSUBMIT в компонентах Signin, так и для регистрации. Мы не хотим этого делать, так как он побеждает цель сухого (не повторяйся себя)

Теперь давайте создадим многоразовый компонент, который можно использовать для совместного использования этой логики с помощью компонентов Signin, так и для регистрации.

Визуализация

import React, { Component } from 'react';

class authRender extends Component {
  state = { auth: {} };

  onChange = ({ target }) => {
    this.setState({
      auth: {
        ...this.state.auth,
        [target.name]: target.value,
      },
    });
  };

  onSubmit = (e) => {
    e.preventDefault();

    console.log(this.state.auth);
  };
  getStateAndHelpers = () => {
    return {
      onChange: this.onChange,
      onSubmit: this.onSubmit,
      auth: this.state.auth,
    };
  };

  render() {
    return this.props.children(this.getStateAndHelpers());
  }
}

export default authRender;

То, что мы сделали в файле RenderProps, заключается в том, что мы просто взяли логику как в системе Signin, так и регистрации компонентов в отдельный компонент, который просто делает детей. Затем вы можете пройти все реквизиты, которые будут доступны внутри детей, хотя я решил отделить его в свою собственную функцию. Этот подход рекомендуется Кент C. Доддс

Как мы его используем

Настоятельно рекомендуется отделить ваши компоненты в контейнеры и презентационные компоненты. По сути, контейнеры имеют состояние компонента или состоянию компонента или управление состоянием, такими как redux.

Мы собираемся создать новый файл внутри контейнера, в котором он будет иметь все состояние и обработчики событий.

Контейнер входа

import React, { Component } from 'react';
import AuthRender from './renderProps';
import Signin from './Signin';

class signinContainer extends Component {
  render() {
    return (
      

       {({ onChange, onSubmit }) => }
      

    );
  }
}

Изобретаренная система

import React from 'react';

const SignIn = ({ onChange, onSubmit }) => (
  

    
 Sign In 

    		
    
    		
    
    
  

);

export default SignIn;

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

Преимущества использования рендеринга

Нам не нужно интересно, откуда наш штат или реквизит. Мы видим их в списке аргументов Render Prop.

Там нет автоматического слияния имен свойств, поэтому нет шансов на то, как столкновение имена. Майкл Джексон

Это правда, потому что представьте, что имея несколько HOC на одном компонент, вы можете быть потеряны, затрудняя его узнать, откуда приходят реквизиты.

Заключение

Рендер реквизиты удивительны, он может сделать все H0C с регулярным компонентом. Я призываю вас смотреть Майкл разговаривает Чтобы понять его больше и надеюсь, что вы будете рефакторуть много вашего Hoc, чтобы использовать регулярные компоненты с рендеринговыми реквизитами.

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