优化React.JS应用程序--仅就React.JS而言[React.JS]

Question

今天我得到了一次面试，面试官问我，你将如何提高你的“反应申请”的表现--仅就反应而言。

他不想在CSS (串联/缩小)、JS (连接/缩小)、图像( Images或使用SVG)方面得到任何答案。

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

• 反应备忘录
• useCallback钩

现在，我真的不知道他在说什么？有人能帮我理解这2条是如何帮助优化反应的吗？另外，还有其他方法(具体来说，仅在如何优化React的性能方面与反应相关)？

任何帮助都将不胜感激！

Answer 1

本文可能对您有所帮助：反应呈现行为的(大部分)完整指南

从那篇文章中，您将看到React将比较before和after虚拟DOM树，并寻找差异。每当它找到一棵树时，它就会安排重新呈现位于该树节点下的整棵树。即:父母重新呈现，它的所有孩子也会重新呈现。除非你告诉反应，以重复使用一些东西，它已经渲染，但这并没有改变。

React.memo API参考

使用React.memo()和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"/>

​

使用React.memo()优化2 - React应用程序

React.memo()告诉React :如果新的呈现将使用上次呈现中的完全相同的props调用回忆录组件，则不要再呈现它。因为同样的props也会产生同样的结果。

您将看到Component1停止了重新呈现，因为它一直被空props调用。但是Component2一直在重新渲染。这是因为每次您重新呈现App时，都会创建一个新的someFunction变量，并为函数创建一个新的引用，因此，也将对其进行更改。

而反应只做浅层比较。它不研究someFunction代码。它只比较该变量的引用(或本原情况下的值)。如果任何一个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"/>

​

使用React.memo() 和 React.useCallback()优化3

现在您将看到只有App重新呈现。因为useCallback“告诉”响应，使函数引用从第一次呈现中保持，并且只在必要时更改它。在这个例子中，它永远不会改变，因为我们已经为useCallback传递了一个空数组。

由于它不会改变，所以Component2将不再每次重新呈现，因为它将始终接收相同的props。

useCallback API参考

​

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

​