Создайте собственный хук для разделения строк (React JS) - PullRequest
Новая
       4

Создайте собственный хук для разделения строк (React JS)

1 голос
/ 07 мая 2020

Я недавно работаю с React JS (хуки). Для проекта мне нужно разбить много строк на разные div. Итак, я создал для этого функцию, которая сэкономила мне время! Мой настоящий вопрос: следует ли мне создавать собственный крючок вместо моей функции? Конечно, сам код работает, но как новичок я не знаю, чист ли мой путь. Мне нужны отзывы, потому что моя главная цель - написать как можно лучший и понятный код. 

// Splitting Texts
const splitText = str => {
  return (
    <div>
      {str.split(' ').map((item, index) => {
        return (
          <div key={index}>
            {item}
          </div>
        );
      })}
    </div>
  );
};

// Main App
export default function App() {
  const name = splitText('Lucie Bachman');
  const description = splitText('Hey, this is my first post on StackOverflow!');

  return (
    <div className="App">
      <h1>{name}</h1> 
      <h2>{description}</h2>
    </div>
  );
}

Ожидаемые результаты: 

<h1>
  <div>
    <div>Lucie</div>
    <div>Bachman</div>
  </div>
</h1>

Я очень рад присоединиться к сообществу! Спасибо вам и позаботьтесь.

Lu cie Bachman

1 Ответ

1 голос
/ 07 мая 2020

Custom hook - это что-то that uses out of the box react hooks, фактически предоставляющее logi c и возвращающее данные.

Если функция возвращает JSX, это фактически просто функция или может использоваться как функциональный компонент

Поскольку вы хотите разделить строку только после того, как вы можете преобразовать ее в компонент и использовать React.memo для оптимизации рендеринга 

// Splitting Texts
const SplitText = React.memo(({str}) => {
  return (
    <div>
      {str.split(' ').map((item, index) => {
        return (
          <div key={index}>
            {item}
          </div>
        );
      })}
    </div>
  );
});

// Main App
export default function App() {

  return (
    <div className="App">
      <h1><SplitText str={'Lucie Bachman'} /></h1> 
      <h2><SplitText str={'Hey, this is my first post on StackOverflow!''} /></h2>
    </div>
  );
}
...