Javascript reactjs中的render和class中的函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42645297/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Function inside render and class in reactjs
提问by CraZyDroiD
I'm trying to learn reactjs and i have some uncertainties. I was refering react DOCS and some other tutorials and i saw functions are written inside render function and also inside class. What things should we do inside render function in react?
我正在尝试学习 reactjs，但我有一些不确定性。我指的是 react DOCS 和其他一些教程，我看到函数是在渲染函数和类中编写的。在react中我们应该在render函数内部做什么？
1st way
第一种方式
class App extends Component {
test(user) {
return user.firstName;
}
render() {
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
return (
<div>
<h1>{this.test(user)}</h1>
</div>
)
}
}
2nd way
第二种方式
class App extends Component {
render() {
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
function test(user) {
return user.firstName;
}
return (
<div>
<h1>{test(user)}</h1>
</div>
)
}
}
Both this methods work. But i want to know what is the best method to do this? Most importantly i want to know what kind of things i can do inside render function.
这两种方法都有效。但我想知道这样做的最佳方法是什么？最重要的是我想知道我可以在渲染函数中做什么样的事情。
Thanks.
谢谢。
采纳答案by Nate Kimball
I think it's ultimately your choice, but I personally prefer only putting functions within render that deal exclusively with rendering components and/or JSX (i.e. mapping over a prop, switch statements that conditionally load a proper component based on a prop, etc...). If the logic behind the function is heavy, I'll leave it out of render.
我认为这最终是你的选择，但我个人更喜欢只在渲染中放置专门处理渲染组件和/或 JSX 的函数（即映射到 prop、基于 prop 有条件地加载适当组件的 switch 语句等...... ）。如果函数背后的逻辑很重，我会把它排除在渲染之外。
Here's an example. Say in your component you have a "users" prop that is supposed to display a list of users. You might have a render function with these types of things:
这是一个例子。假设在您的组件中，您有一个“用户”道具，它应该显示用户列表。您可能拥有具有以下类型的渲染功能：
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>
);
}However, if you had a function that needed to somehow manipulate data about a user, it might be better to put that in a function outside of render.
但是，如果您有一个函数需要以某种方式操作有关用户的数据，最好将其放在 render 之外的函数中。
回答by spirift
The render method normally gets called a lot of times. I think it is more performant to declare your functions outside of the render method if you can. See this answerfor a more detailed explanation of the render method. As your example is a pure function you could also declare it as a constoutside the context of the class altogether.
render 方法通常会被调用很多次。我认为如果可以的话，在 render 方法之外声明你的函数会更高效。有关渲染方法的更详细说明，请参阅此答案。由于您的示例是一个纯函数，您也可以将其const完全声明为类的上下文之外。
const user = {
firstName: 'Harper',
lastName: 'Perez'
}
const test = function(user) {
return user.firstName;
}
const App = () => (
<div>
<h1>hello {test(user)}</h1>
</div>
)
