我今天接受了一次面试,面试官问我你将如何提高“React 应用程序”的性能——仅就 react 而言。
他不想要任何关于 CSS(连接/缩小)、JS(连接/缩小)、图像(图像 Sprite 或使用 SVG)的答案。
现在,我能得到什么提示是使用:
现在,我真的不知道他在说什么?有人可以帮我理解这两个如何帮助优化 React 吗?此外,还有其他方法吗(具体而言,仅与 React 相关,即如何优化 React-Apps 的性能)?
任何帮助,将不胜感激!
最佳答案
本文可能对您有所帮助:A (Mostly) Complete Guide to React Rendering Behavior
从那篇文章中你会看到 React 会比较 before
和 after
虚拟 DOM 树并寻找差异。每当它找到一个时,它就会安排重新渲染该树节点下的整棵树。即:父级重新渲染,其所有子级也将重新渲染。除非你告诉 React 重用它之前渲染过的一些东西,而且这些东西没有改变。
React.memo API reference
使用 React.memo()
优化 React 应用程序的方式和 React.useCallback
看起来像这样:
1 - 未优化的 React 应用程序:
看到当您单击按钮时,App
重新渲染。
即使没有新的东西被传递给两个子组件,它们也会重新渲染。这是 React 的默认行为。
function App() {
console.log("Rendering App...");
const [boolean,setBoolean] = React.useState(false);
const someFunction = () => {
console.log("Running someFunction...");
}
return(
<React.Fragment>
<Component1/>
<Component2
someFunction={someFunction}
/>
<button onClick={() => setBoolean((prevState) => !prevState)}>
Re-render App
</button>
</React.Fragment>
);
}
const Component1 = (props) => {
console.log("Rendering Component1...");
return(
<div>I am component 1</div>
);
};
const Component2 = (props) => {
console.log("Rendering Component2...");
return(
<div>I am component 2</div>
);
}
ReactDOM.render(<App/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
2 - 使用
React.memo()
优化的 React 应用程序React.memo()
告诉 React 类似的事情:如果新的渲染将使用完全相同的 props
调用那个记忆化的组件从上次渲染开始,不要再次渲染。因为相同props
无论如何都会产生相同的结果。你会看到
Component1
已停止重新渲染,因为它一直以空 props
调用.但是Component2
不断重新渲染。那是因为每次重新渲染 App
, 一个新的 someFunction
正在创建具有函数新引用的变量,因此也正在更改。而 React 只做 浅比较 .它不查看
someFunction
代码。它只比较该变量的引用(或一个值,如果是 primitive )。如果有任何 props
与上次渲染不同,它将重新渲染。function App() {
console.log("Rendering App...");
const [boolean,setBoolean] = React.useState(false);
const someFunction = () => {
console.log("Running someFunction...");
}
return(
<React.Fragment>
<Component1/>
<Component2
someFunction={someFunction}
/>
<button onClick={() => setBoolean((prevState) => !prevState)}>
Re-render App
</button>
</React.Fragment>
);
}
const Component1 = React.memo((props) => {
console.log("Rendering Component1...");
return(
<div>I am component 1</div>
);
});
const Component2 = React.memo((props) => {
console.log("Rendering Component2...");
return(
<div>I am component 2</div>
);
});
ReactDOM.render(<App/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
3 - 使用
React.memo()
优化和 React.useCallback()
您现在会看到只有
App
重新渲染。因为useCallback
“告诉” React 保留第一次渲染时的函数引用,并且仅在必要时更改它。在这个例子中,它永远不会改变,因为我们为 useCallback
传递了一个空数组。 .既然不会变,
Component2
将不再每次都重新渲染,因为它总是会收到相同的 props
.useCallback API reference
function App() {
console.log("Rendering App...");
const [boolean,setBoolean] = React.useState(false);
const someFunction = React.useCallback(() => {
console.log("Running someFunction...");
},[]);
return(
<React.Fragment>
<Component1/>
<Component2
someFunction={someFunction}
/>
<button onClick={() => setBoolean((prevState) => !prevState)}>
Re-render App
</button>
</React.Fragment>
);
}
const Component1 = React.memo((props) => {
console.log("Rendering Component1...");
return(
<div>I am component 1</div>
);
});
const Component2 = React.memo((props) => {
console.log("Rendering Component2...");
return(
<div>I am component 2</div>
);
});
ReactDOM.render(<App/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
关于javascript - 优化 React 应用程序 - 仅根据 React [React.JS],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64663544/