Функции внутри и снаружи render ()

Кроме того, handleClick - это функция, созданная и доступная для каждого объекта / компонента, а divide - это функция с локальной областью видимости, их функциональность может быть практически одинаковой. Однако divider будет создаваться как новая функция при каждом рендеринге, что в дальнейшем может повлиять на производительность, в то время как handleClick создается один раз для определенного компонента (объекта).

render() вызывается каждый раз при смене state. Таким образом, каждая функция, которая хранится внутри функции рендеринга, будет создаваться как новая функция при каждом изменении state. Это означает, что divider будет создаваться заново каждый раз при повторном рендеринге.

handleClick - это обычная объектная функция.

Функции, написанные внутри функции render, обычно связаны с перерисовкой компонентов.

Из примера на официальный сайт:

Во-первых, если мы хотим создать Clock в самом начале, то таким образом мы пытались создать объектно-ориентированный, поддерживаемый компонент с функциональным объектом без состояния.

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
   ReactDOM.render(
     <Clock date = {new Date()} />,
     document.getElementById('root')
   );
}

setInterval(tick, 1000);

цитата из документа

to make the Clock component truly reusable and encapsulated. It will set up its own timer and update itself every second.

... Ideally we want to write this once and have the Clock update itself...

Итак, вот дух React, мы хотим преобразовать этот объект функции в класс, который мог бы поддерживать себя, поэтому теперь мы задействуем render(), а точнее, компонент с сохранением состояния:

Add a single empty method to it called render()
...
Clock is now defined as a class rather than a function.

Тогда получаем:

class Clock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {date: new Date()};
        this.clockCore = this.clockCore.bind(this);
    }

    componentDidMount() {
        this.timerID = setInterval(
          () => this.tick(),
           1000
        );
     }

     tick() {
         this.setState({
             date: new Date()
         });
     }

     clockCore() {
         return (<div>
            <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
         </div>);
     }

     render() {
        return this.clockCore();
     }
}

Как вы знаете, render() запускается снова и снова, если состояние компонента необходимо обновить с помощью setState().

Обновлять

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

Из приведенного вами примера использование разделителя может быть таким:

const divider = (divider, key) => {
  const classes = classNames( 'divider', divider.class);
  return (<li key = {key} className = { classes }></li>);
};

return (<ul>{this.state.dividerList?
    this.state.dividerList.forEach(divider) : null}</ul>);

Я думаю, что причина этого просто в ремонтопригодности, кто-то может захотеть, чтобы весь код создания DOM внутри render() для легкой трассировки, когда возвращаемая структура DOM действительно сложна (и стрелочная функция легкая), но, как я сказал, это субъективно, это действительно может быть определено снаружи.

В этом случае вместо этого используется Раньше я, и кажется, что то, что вы предоставили, более элегантно, но если вы определили эту функцию вне render(), это меня отвлекает.

let dividers = [];
if (this.state.dividerList) {
    this.state.dividerList.forEach((divider, key) => {
        let classes = classNames( 'divider', divider.class);
        dividers.push((<li key = {key} className = { classes }></li>));
    });
}

return (<ul>{dividers}</ul>);

Таким образом, другая функция, которую вы предоставили, которая нацелена на функцию манипуляций с DOM, полностью правильна и должна быть определена снаружи.