javascript - render() 内外的函数

Question

我刚刚开始总体学习 React 和 JavaScript。阅读文档和教程后，我查看了示例项目并尝试整理我尚未了解的内容。

然后我看到有些函数是在 render() 函数内部定义的，有些是在 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() 内部和外部有一些函数？

编辑:

render() 之外的函数的另一个示例:

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

EDIT2:在另一个线程中有人回答说，如果函数背后的逻辑很重，它应该在 render() 之外。但是为什么你想要在 render() 中有函数呢？

Answer 1

render() 每次 state 改变时都会被调用。因此，每次 state 更改时，保留在 render 函数中的每个函数都将被创建为一个新函数。这意味着 divider 将在每次 react 重新渲染时新创建。

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

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