reactjs中的render和class里面的函数

Posted 2023-02-21

【中文标题】reactjs中的render和class里面的函数

【英文标题】：Function inside render and class in reactjs

【发布时间】：2017-07-27 11:37:03

【问题描述】：

我正在尝试学习 reactjs，但我有一些不确定性。我在参考 react DOCS 和其他一些教程，我看到函数是在渲染函数和类中编写的。 react里面的render函数应该做什么？

第一种方式

class App extends Component 

    test(user) 

        return user.firstName;
    

    render() 

        const user = 
            firstName: 'Harper',
            lastName: 'Perez'
        ;

        return (

            <div>

                <h1>this.test(user)</h1>

            </div>
        )
    

第二种方式

class App extends Component 

       render() 

        const user = 
            firstName: 'Harper',
            lastName: 'Perez'
        ;

        function test(user) 

            return user.firstName;
        

        return (

            <div>

                <h1>test(user)</h1>

            </div>

        )

    

这两种方法都有效。但我想知道最好的方法是什么？最重要的是我想知道我可以在渲染函数中做什么样的事情。

谢谢。

【参考方案1】：

render 方法通常会被调用很多次。我认为如果可以的话，在渲染方法之外声明你的函数会更高效。有关 render 方法的更详细说明，请参阅this answer。

您示例中的测试函数是一个纯函数，这允许您在反应组件的范围/上下文之外完全声明它，因为它只需要访问传入的参数。

也就是说，在渲染方法中声明函数或者现在更常见的函数组件中声明函数是完全可以的。有像 useCallback 这样的钩子可以帮助提高性能，但 99% 的情况下这不是问题。永远记住，过早的性能优化是万恶之源，您需要先衡量性能，然后才能改进它。

// helpers.js
const test = function(user) 
    return user.firstName;


// App.js
const App = () => 
  const user = 
    firstName: 'Harper',
    lastName: 'Perez'
  

  return (
    <div>
      <h1>hello test(user)</h1>
    </div>
  )

【讨论】：

他们在这里在课堂之外声明是没有意义的。您可以将函数附加到类，这样就不必传入参数。这样做的唯一原因是如果您使用的是纯函数。

@MartinMazzaDawson 正如我在回答中提到的那样，由于 OP 使用的是纯函数，因此可以将其放置在更可重用且更好地分离关注点的类的上下文之外。

您能否澄清一下，作为纯函数的示例具体是什么使其能够放置在类的上下文之外？换一种方式问，当函数不能放在类的上下文之外时，会有什么例子？

你可以在组件之外放置一个不纯的函数，它可能会很好地工作。在组件内部声明的原因是更容易使用内部道具和钩子。如果我们谈论的是类，您将拥有一个类的方法，以便以后使用它们，并允许访问类中的私有变量。

【参考方案2】：

我认为这最终是你的选择，但我个人更喜欢只在 render 中放置专门处理渲染组件和/或 JSX 的函数（即映射到 prop、根据 prop 有条件地加载适当组件的 switch 语句等...）。如果函数背后的逻辑很繁重，我就不渲染了。

这是一个例子。假设在您的组件中，您有一个应该显示用户列表的“用户”道具。你可能有一个带有这些类型的渲染函数：

render()
  
  // An array of user objects & a status string.
  const  users, status  = this.props;
  
  // Map users array to render your children:
  const renderUserList = () => 
    return users.map(user => 
      return <div> user.firstName </div>;
    );
  ;
  
  // Conditionally load a component:
  const renderStatus = () => 
    let component = '';
    switch(status)
      case 'loading':
        component = <Component1 />
        break;
      case 'error':
        component = <Component2 />
        break;
      case 'success':
        component = <Component3 />
        break;
      default:
        break;
    
    
    return component;
  
  
  // render() return:
  return(
    <div>
      <div className="status">
         renderStatus() 
      </div>
      <div className="user-list">
         renderUserList() 
      </div>
    </div>
  );

但是，如果您有一个函数需要以某种方式处理有关用户的数据，最好将它放在渲染之外的函数中。