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

Question

我今天接受了一次面试，面试官问我你将如何提高“React 应用程序”的性能——仅就 react 而言。
他不想要任何关于 CSS(连接/缩小)、JS(连接/缩小)、图像(图像 Sprite 或使用 SVG)的答案。
现在，我能得到什么提示是使用:

react 备忘录

使用回调 Hook

现在，我真的不知道他在说什么？有人可以帮我理解这两个如何帮助优化 React 吗？此外，还有其他方法吗(具体而言，仅与 React 相关，即如何优化 React-Apps 的性能)？
任何帮助，将不胜感激!

Answer 1

本文可能对您有所帮助: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"/>