Здесь у нас есть обычный старый компонент класса React. Ничего особенного в этом нет, верно? У нас есть некоторое состояние, функция с именем handleLoudness, которая вызывает setState, и функция рендеринга, которая возвращает какой-то JSX. Здесь нет ничего особенного, верно?
Подождите... а как насчет того, что в возвращаемом значении? this.props.render? Что бы это могло быть?
Похоже, это функция с некоторым аргументом! Но что он может отображать на странице?
Введите SayHello
Так так так. Что мы имеем здесь? Кажется, у нас есть реквизит для рендеринга!
SayHello вызывает компонент Hello, а компонент Hello определяет функцию, которая возвращает некоторый JSX.
Когда у компонента, такого как Hello, есть свойство, которое вызывает функцию, которая объявляется в его собственной функции render(), мы можем напрямую манипулировать тем, что вызывается в этой функции, и использовать render() все, что мы хотим, в ее объявлении.
В SayHello всякий раз, когда мы нажимаем на наш компонент Hello, мы либо здороваемся, либо YELL HELLO.
Если мы создадим ‹SayHelloWithName /›, мы получим все функциональные возможности ‹SayHello /›, но мы также можем добавить имя! Мы все еще рендерим наш компонент ‹Hello /›, но мы можем изменить то, что он рендерит.
И почему это полезно? Ну, это позволяет нам абстрагироваться от использования нашего компонента ‹Hello /›. Мы по-прежнему можем использовать нашу функцию handleLoudness, потому что она была определена специально в компоненте ‹Hello /›. Эта функция никуда не денется, но мы можем добавлять новые способы рендеринга наших компонентов ‹Hello /› по своему усмотрению. Мы можем разделить то, что рендерит наш компонент ‹Hello /›, и это чрезвычайно мощно.
