render（）内部和外部的函数

Question

我刚刚开始学习React和JavaScript。在我阅读了留档和教程之后，我看了一下示例项目，并试图整理我还没有得到的内容。

然后我看到有一些函数是在render（）函数内部定义的，还有一些函数是在render（）函数外部定义的。

例如，在渲染（）之外：

handleClick(e) {
    e.preventDefault();
    e.target.parentElement.classList.toggle('open');
  }

和内部render（）。。。

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

为什么它们看起来如此不同，为什么你想在的渲染（）内部和外部有一些函数？

编辑：

render（）之外的函数的另一个示例：

hideMobile() {
    if (document.body.classList.contains('sidebar-mobile-show')) {
      document.body.classList.toggle('sidebar-mobile-show')
    }
  }

EDIT2：在另一个线程中，有人回答说，如果函数背后的逻辑很重，那么它应该在render（）之外。但无论如何，为什么要在render（）中包含函数呢？

Answer 1

除此之外，handleClark是为每个Object/Component创建并可访问的函数，而划分是一个本地范围的函数，它们的功能可以几乎相同。然而，将在每个渲染上创建一个新函数，这可能会对以后的性能产生影响，而为一个定义的组件（对象）创建一次handleClark。

Answer 2

来自官方网站上的示例：

首先，如果我们想在一开始就构建一个时钟，这就是我们试图用无状态函数对象创建一个面向对象的、可维护的因素的组件的方式。

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);

引用doc的话

使时钟组件真正可重用和封装。它将设置自己的计时器并每秒更新自己。

... 理想情况下，我们想写一次，让时钟自动更新。。。

这就是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();
     }
}

如您所知，如果组件的状态需要通过setState（）刷新，则会再次触发render（）。

使现代化

在我看来，没有必要在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>);

我认为这样做的原因只是为了可维护性，可能有人希望在render（）中创建所有DOM代码，以便在返回的DOM结构非常复杂（而且arrow函数是轻量级的）时轻松跟踪，但正如我所说的，这是主观的，它确实可以在外部定义。

在这种情况下，我通常会执行下面的操作，您提供的功能似乎更为优雅，但如果您在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操作特性的函数是完全正确的，可以在外部定义。

Answer 3

render（）在状态每次更改时都被调用。因此，每次状态更改时，保存在渲染函数中的每个函数都将被创建为新函数。这意味着每次react重新渲染时都会新创建分隔符。

handleClick是一个普通的对象函数。

在render函数中编写的函数通常是那些处理组件重新招标的函数。