优化 React 应用程序 - 仅根据 React [React.JS]

Posted 2023-02-22

【中文标题】优化 React 应用程序 - 仅根据 React [React.JS]

【英文标题】：Optimizing React Application - in terms of React Only [React.JS]

【发布时间】：2021-02-16 04:08:02

【问题描述】：

我今天接受了一次面试，面试官问我你将如何提高“React 应用程序”的性能 - 仅就反应而言。

他不想要任何关于 CSS（连接/缩小）、JS（连接/缩小）、图像（Image-Sprites 或使用 SVG）的答案。

现在，我能得到的提示是：

反应备忘录 使用回调挂钩

现在，我真的不知道他在说什么？有人可以帮我理解这两个如何帮助优化 React 吗？另外，还有其他方法吗（具体来说，仅与 React 有关如何优化 React-Apps 的性能）？

任何帮助将不胜感激！

【问题讨论】：

useCallback 文档有帮助吗？ reactjs.org/docs/hooks-reference.html#usecallback

React.memo 允许“缓存”正在渲染的功能组件。函数组件通常总是重新渲染，即使它们的 props 和 state 相同。包裹在备忘录中，他们不再那样做。这里的优化模式是记忆化。

【参考方案1】：

这篇文章可能对你有所帮助：A (Mostly) Complete Guide to React Rendering Behavior

从那篇文章中，您将看到 React 将比较 before 和 after 虚拟 DOM 树并寻找差异。每当它找到一个时，它就会安排重新渲染该树节点下的整棵树。即：父级重新渲染，其所有子级也将重新渲染。除非你告诉 React 重用它之前渲染过的一些东西，而且这些东西没有改变。

React.memo API reference

使用 React.memo() 和 React.useCallback 优化 React 应用程序的方式如下所示：

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"/>