react web
Web app performance plays a big part in bringing the best experience for our users. And below are 5 tips you can use right now to optimize your React app performance.
Web应用程序的性能在为我们的用户带来最佳体验方面起着很大的作用。 以下是您现在可以使用的5个技巧，以优化您的React应用性能。
1.避免使用匿名函数 (1. Avoid Using Anonymous Functions)
Anonymous functions are usually used when you’re working with callbacks or event handlers.
在使用回调或事件处理程序时，通常使用匿名函数。
function renderSignInButton() {
return (
<button onClick={() => console.log(‘Sign In’)}>
Sign In
</button>
);
}Anonymous functions are convenient to use sometimes. However, it causes a problem. Anonymous functions aren’t assigned to a variable. So, every time the component gets re-rendered, a new memory area is allocated to serve the anonymous.
匿名函数有时很方便使用。 但是，这会引起问题。 匿名函数未分配给变量。 因此，每次重新渲染组件时，都会分配一个新的内存区域来服务于匿名用户。
To avoid allocating unnecessary memory, we should use named functions:
为了避免分配不必要的内存，我们应该使用命名函数：
const handleSignButtonClick = () => console.log(‘Sign In’);function renderSignInButton() {
return (
<button onClick={handleSignInButtonClick}>
Sign In
</button>
);
}This way, a memory area will be only allocated once.
这样，一个存储区域将只分配一次。
2.避免使用内联样式 (2. Avoid Using Inline Styling)
Just like CSS, we can style a React component using inline styling. We usually take advantage of this ability to style some component quickly.
就像CSS一样，我们可以使用内联样式来对React组件进行样式设置。 我们通常利用此功能来快速设置某些组件的样式。
function renderUser() {
return (
<User style={{background: ‘red’, size: 15}}></User>
);
}As we overuse it, we generate duplicated code, which not only increases the time when we need to make changes but also create a performance issue.
当我们过度使用它时，我们会生成重复的代码，这不仅增加了我们进行更改的时间，而且还会导致性能问题。
The issue is just like anonymous functions, a new memory will be allocated whenever re-rendering.
这个问题就像匿名函数一样，每当重新渲染时都会分配一个新的内存。
We can fix it the same way by naming the style:
我们可以通过命名样式来用相同的方式修复它：
const userStyle = {
background: ‘red’,
size: 15
};function renderUser() {
return (
<User style={userStyle}></User>
);
}3.使用React Virtualized显示大数据 (3. Use React Virtualized for Displaying Large Data)
A long list of data can slow down your app if it’s not rendered properly. You should display a handful of rows within the visible viewport of the browser. The next rows will be shown as you scroll down or click the next button.
如果数据呈现不正确，则一长串数据可能会使您的应用变慢。 您应该在浏览器的可见视口中显示少量行。 当您向下滚动或单击下一步按钮时，将显示下一行。
One way to make the process easer is to use React Virtualized.
一种简化流程的方法是使用React Virtualized 。
4.使用PureComponent (4. Use PureComponent)
We use shouldComponentUpdate function to check if a component should be updated or not by comparing the current data with the next one. If the data is complex, we have to check a lot.
我们使用shouldComponentUpdate函数通过将当前数据与下一个数据进行比较来检查是否应更新组件。 如果数据很复杂，我们必须检查很多。
Or we should leave it to PureComponent, which will reduce unnecessary re-renders.
或者我们应该将其留给PureComponent，这将减少不必要的重新渲染。
So, instead of:
因此，代替：
class User extends React.Component { shouldComponentUpdate(nextProps, nextState) {
return nextState.data !== this.state.data;
} render() {
return (
<div>
<h1>Hello</h1>
</div>
)
}}We should do this:
我们应该这样做：
class User extends React.PureComponent {
render() {
return (
<div>
<h1>Hello</h1>
</div>
)
}
}5.使用React.Fragments (5. Use React.Fragments)
Can you see the issue from the below example?
您可以从以下示例中看到问题吗？
class HelloComponent extends React.Component {
render() {
return (
<div>
<h1>Hello {this.props.name}</h1>
<h2>Start editing me</h2>
</div>
)
}
}The parent div tag is kind of redundant. I mean an error will occur if you remove it but there’re ways get rid of it while rendering. One way is to use React.Fragment.
父div标签有点多余。 我的意思是，如果删除它，将会发生错误，但是在渲染时有很多方法可以消除它。 一种方法是使用React.Fragment 。
class HelloComponent extends React.Component { render() {
return (
<React.Fragment>
<h1>Hello {this.props.name}</h1>
<h2>Start editing me</h2>
</React.Fragment>
)
}
}And even more concise:
更简洁：
class HelloComponent extends React.Component { render() {
return (
<>
<h1>Hello {this.props.name}</h1>
<h2>Start editing me</h2>
</>
)
}
}You may think removing an HTML tag possibly doesn’t change much but your project is not that small, right? Which means you can cut a lot of rendering cost by eliminating all unnecessary tags.
您可能会认为删除HTML标记可能不会有太大变化，但是您的项目并不小，对吧？ 这意味着您可以消除所有不必要的标签，从而削减大量渲染成本。
结论 (Conclusion)
There’re many ways to improve React app performance out there but the above are things I’m using right now.
有很多方法可以改善React应用的性能，但是以上是我现在正在使用的东西。
I’m still in the learning process. I think the best way to optimize React app is to deeply understand how components work and then design your way to boost its performance.
我仍在学习过程中。 我认为优化React应用程序的最佳方法是深入了解组件的工作原理，然后设计提高其性能的方法。
What are the methods you’re using right now on React app performance optimization? Let me know in the comment below.
您目前在React应用性能优化中使用的方法是什么？ 在下面的评论中让我知道。
进一步阅读 (Further reading)
普通英语JavaScript (JavaScript In Plain English)
Did you know that we have three publications and a YouTube channel? Find links to everything at plainenglish.io!
您知道我们有三个出版物和一个YouTube频道吗？ 在plainenglish.io上找到所有内容的链接！
react web