Javascript reactjs中render和类内部的函数

我正在努力学习，我有一些不确定因素。我参考了react文档和一些其他教程，我看到函数是在render函数和类中编写的。在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>
        )
    }
}

类应用程序扩展组件{
测试（用户）{
返回user.firstName；
}
render（）{
常量用户={
名字：“哈珀”，
姓：“佩雷斯”
};
返回(
{this.test（用户）}
)
}
}

第二条路

class App extends Component {

       render() {

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

        function test(user) {

            return user.firstName;
        }

        return (

            <div>

                <h1>{test(user)}</h1>

            </div>

        )

    }
}

类应用程序扩展组件{
render（）{
常量用户={
名字：“哈珀”，
姓：“佩雷斯”
};
功能测试（用户）{
返回user.firstName；
}
返回(
{测试（用户）}
)
}
}

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

---

谢谢。

我想这最终是你的选择，但我个人更喜欢只在render中放置专门处理渲染组件和/或JSX的函数（即，映射到一个道具上，根据道具有条件地加载适当组件的switch语句，等等）。如果函数背后的逻辑很重，我将把它排除在渲染之外

这里有一个例子。假设您的组件中有一个“用户”道具，该道具应该显示用户列表。您可能有一个包含以下类型内容的渲染函数：

render（）{
//用户对象数组&状态字符串。
const{users，status}=this.props；
//映射用户数组以渲染子对象：
常量渲染器列表=（）=>{
返回users.map（user=>{
返回{user.firstName}；
});
};
//有条件地加载组件：
常量renderStatus=（）=>{
让组件=“”；
开关（状态）{
“装载”案例：
组件=
打破
案例“错误”：
组件=
打破
成功案例：
组件=
打破
违约：
打破
}
返回组件；
}
//render（）返回：
返回(
{renderStatus（）}
{renderUserList（）}
);
}

渲染方法通常会被调用很多次。如果可以的话，我认为在render方法之外声明函数会更有效。有关渲染方法的更详细说明，请参见。由于您的示例是一个纯函数，您还可以在类的上下文之外将其声明为

const

// 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>
  )
}

//helpers.js
常量测试=功能（用户）{
返回user.firstName；
}
//App.js
常量应用=（）=>{
常量用户={
名字：“哈珀”，
姓：“佩雷斯”
}
返回(
你好{测试（用户）}
)
}

在这里，在类之外声明它们是没有意义的。您可以将函数附加到类，这样就不必传入参数。这样做的唯一原因是，如果您使用的是纯函数。@MartinMazzaDawson，正如我在回答中提到的，因为OP使用的是纯函数，所以可以将其放置在类的上下文之外，这样可以更好地重用和分离关注点。您能澄清一下，这个例子是一个纯函数，它可以被放置在类的上下文之外，具体是什么呢？换一种方式问，如果函数不能放在类的上下文之外，会有什么样的例子？你可以把一个不纯净的函数放在组件之外，它可能会工作得很好。在组件内部声明的原因是为了更容易地使用内部道具和挂钩。如果我们讨论的是类，那么您可以使用类的方法来允许以后使用它们，还可以访问类中的私有变量。