Техника реквизита React за 3 минуты

Примите эту полезную технику, делая несколько часов ⌚

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

Для тех, кто находится в лагере TL; DR , прокрутите вниз для демонстрации 👍

Обработайте какую -то или всю логику рендеринга для компонента.

 }
/>

Когда вы повторяете шаблоны/логику в компонентах.

Примеры;

• Повторяя структуры пользовательского интерфейса
• Зацепление/подпись на источник данных
• Зацепление на глобальные события (прокрутка, изменение размера и т. Д.)

Давайте создадим часы ⌚ Наш компонент часов будет использовать Moment.js , библиотека утилиты даты и времени.

Каждый 1000 мс Мы установили состояние на новое Момент Анкет Изменение состояния вызывает рендеринг, и мы отображаем время.

const Watch = () => {
  const [date, setDate] = useState(moment())
  useEffect(() => {
    const TICK = setInterval(() => setDate(moment()), 1000)
    return () => {
      clearInterval(TICK)
    }
  }, [])
  return (
    
      
        
          
            {date.format('HH')}
            {date.format('mm')}
          
        
      
    
  )
}

Не беспокойся Ремешок , Безель , Экран и т. д. или любой из стилей. Мы только Заинтересован в технике.

Но что, если мы хотели часы с другим лицом? Многие носимые устройства позволяют нам изменить лицо часов. Мы создаем новый Смотреть вариация для каждого лица? Нет 👎

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

const Watch = ({face}) => {
  const [date, setDate] = useState(moment())
  useEffect(() => {
    const TICK = setInterval(() => setDate(moment()), 1000)
    return () => {
      clearInterval(TICK)
    }
  }, [])
  return (
    
      
        
          {face(date)}
        
      
    
  )
}

Теперь мы можем создать компоненты лица без сохранения состояния, которые принимают Момент и делать это по -разному.

Извлечение нашей первоначальной реализации может выглядеть как

const CustomFace = date => (
  
    {date.format('HH')}
    {date.format('mm')}
  
)
// JSX to render being 

Что если мы не пройдем в лицо ? Мы получили бы пустые часы. Но мы могли переименовать Customface к По умолчанию и сделать это DefaultProp на Смотреть 👍

Хороший 👍

Давайте создадим новое лицо. Аналоговый 🕔

const AnalogFace = date => {
  const seconds = (360 / 60) * date.seconds()
  const minutes = (360 / 60) * date.minutes()
  const hours = (360 / 12) * date.format('h')
  return (
    
      
      
            
    
  )
}

Этот берет дату и отображает его руками ✋

Затем мы могли бы продлить это, чтобы создать множество разных лиц для часов 🤓 Не нужно повторять логику.

const App = () => (
  
    
    
    
    
    
  
)

render(, ROOT)

Давая нам

Вот и все!

Используя рендер Опора на нашем Смотреть Компонент держит логику в одном месте и мешает нам повторить себя. Это облегчает поддержание и повторное использование 💪

• Используйте, когда есть возможность поделиться логикой компонентов/рендеринга

• Чрезмерное использование. Другая модель может быть более уместной.
• Избегайте реализации рендер реквизит с PureComponent s, если ваша опора не определена

• A рендер Проп может иметь любое имя. дети это рендер проп.
• Большинство компонентов с использованием рендер Пропор также может быть компонентом высшего порядка и наоборот!

3-минутное вступление к рендер реквизит!

Для дальнейшего чтения, проверьте React Docs Анкет

Все демонстрации доступны в этом Коллекция Codepen Анкет

Как всегда, любые вопросы или предложения, пожалуйста, не стесняйтесь оставить ответ или твитнуть мне 🐦 🐦 🐦 🐦 🐦 🐦 🐦 🐦 🐦 🐦 🐦 🐦 🐦 🐦 🐦 🐦 🐦 🐦 🐦 🐦

Как всегда, любые вопросы, пожалуйста, не стесняйтесь оставить ответ или Твитнуть меня 🐦! И скажи “Эй!” В любом случае 😎

Оригинал: “https://dev.to/jh3y/react-s-render-props-technique-in-3-minutes-3njg”