日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

前言

成都創(chuàng)新互聯(lián)公司公司2013年成立，先為梨樹等服務(wù)建站，梨樹等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為梨樹企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

我工作中的技術(shù)棧主要是 React + TypeScript，這篇文章我想總結(jié)一下如何在項目中運用 React 的一些技巧去進行性能優(yōu)化，或者更好的代碼組織。

性能優(yōu)化的重要性不用多說，谷歌發(fā)布的很多調(diào)研精確的展示了性能對于網(wǎng)站留存率的影響，而代碼組織優(yōu)化則關(guān)系到后續(xù)的維護成本，以及你同事維護你代碼時候“口吐芬芳”的頻率??，本篇文章看完，你一定會有所收獲。

神奇的 children

我們有一個需求，需要通過 Provider 傳遞一些主題信息給子組件：

看這樣一段代碼：

 
 
 
 

  
  
  
  
import React, { useContext, useState } from "react";
  
  
  
  

  
  
  
  
const ThemeContext = React.createContext();
  
  
  
  

  
  
  
  
export function ChildNonTheme() {
  
  
  
  
  console.log("不關(guān)心皮膚的子組件渲染了");
  
  
  
  
  return 
我不關(guān)心皮膚，皮膚改變的時候別讓我重新渲染！
;
  
  
  
  
}
  
  
  
  

  
  
  
  
export function ChildWithTheme() {
  
  
  
  
  const theme = useContext(ThemeContext);
  
  
  
  
  return 
我是有皮膚的哦~ {theme}
;
  
  
  
  
}
  
  
  
  

  
  
  
  
export default function App() {
  
  
  
  
  const [theme, setTheme] = useState("light");
  
  
  
  
  const onChangeTheme = () => setTheme(theme === "light" ? "dark" : "light");
  
  
  
  
  return (
  
  
  
  
    
  
  
  
  
      改變皮膚
  
  
  
  
      
  
  
  
  
      
  
  
  
  
      
  
  
  
  
      
  
  
  
  
      
  
  
  
  
      
  
  
  
  
      
  
  
  
  
      
  
  
  
  
    
  
  
  
  
  );
  
  
  
  
}
 
 
 
 

這段代碼看起來沒啥問題，也很符合擼起袖子就干的直覺，但是卻會讓 ChildNonTheme 這個不關(guān)心皮膚的子組件，在皮膚狀態(tài)更改的時候也進行無效的重新渲染。

這本質(zhì)上是由于 React 是自上而下遞歸更新， 這樣的代碼會被 babel 翻譯成 React.createElement(ChildNonTheme) 這樣的函數(shù)調(diào)用，React官方經(jīng)常強調(diào) props 是immutable 的，所以在每次調(diào)用函數(shù)式組件的時候，都會生成一份新的 props 引用。

來看下 createElement 的返回結(jié)構(gòu)：

 
 
 
 

  
  
  
  
const childNonThemeElement = {
  
  
  
  
  type: 'ChildNonTheme',
  
  
  
  
  props: {} // <- 這個引用更新了
  
  
  
  
}
 
 
 
 

正是由于這個新的 props 引用，導(dǎo)致 ChildNonTheme 這個組件也重新渲染了。

那么如何避免這個無效的重新渲染呢?關(guān)鍵詞是「巧妙利用 children」。

 
 
 
 

  
  
  
  
import React, { useContext, useState } from "react";
  
  
  
  

  
  
  
  
const ThemeContext = React.createContext();
  
  
  
  

  
  
  
  
function ChildNonTheme() {
  
  
  
  
  console.log("不關(guān)心皮膚的子組件渲染了");
  
  
  
  
  return 
我不關(guān)心皮膚，皮膚改變的時候別讓我重新渲染！
;
  
  
  
  
}
  
  
  
  

  
  
  
  
function ChildWithTheme() {
  
  
  
  
  const theme = useContext(ThemeContext);
  
  
  
  
  return 
我是有皮膚的哦~ {theme}
;
  
  
  
  
}
  
  
  
  

  
  
  
  
function ThemeApp({ children }) {
  
  
  
  
  const [theme, setTheme] = useState("light");
  
  
  
  
  const onChangeTheme = () => setTheme(theme === "light" ? "dark" : "light");
  
  
  
  
  return (
  
  
  
  
    
  
  
  
  
      改變皮膚
  
  
  
  
      {children}
  
  
  
  
    
  
  
  
  
  );
  
  
  
  
}
  
  
  
  

  
  
  
  
export default function App() {
  
  
  
  
  return (
  
  
  
  
    
  
  
  
  
      
  
  
  
  
      
  
  
  
  
      
  
  
  
  
      
  
  
  
  
      
  
  
  
  
      
  
  
  
  
      
  
  
  
  
      
  
  
  
  
    
  
  
  
  
  );
  
  
  
  
}
 
 
 
 

沒錯，唯一的區(qū)別就是我把控制狀態(tài)的組件和負責展示的子組件給抽離開了，通過 children 傳入后直接渲染，由于 children 從外部傳入的，也就是說 ThemeApp 這個組件內(nèi)部不會再有 React.createElement 這樣的代碼，那么在 setTheme 觸發(fā)重新渲染后，children 完全沒有改變，所以可以直接復(fù)用。

讓我們再看一下被 ThemeApp 包裹下的 ，它會作為 children 傳遞給 ThemeApp，ThemeApp 內(nèi)部的更新完全不會觸發(fā)外部的 React.createElement，所以會直接復(fù)用之前的 element 結(jié)果：

 
 
 
 

  
  
  
  
// 完全復(fù)用，props 也不會改變。
  
  
  
  
const childNonThemeElement = {
  
  
  
  
  type: ChildNonTheme,
  
  
  
  
  props: {}
  
  
  
  
}
 
 
 
 

在改變皮膚之后，控制臺空空如也!優(yōu)化達成。

總結(jié)下來，就是要把渲染比較費時，但是不需要關(guān)心狀態(tài)的子組件提升到「有狀態(tài)組件」的外部，作為 children 或者props傳遞進去直接使用，防止被帶著一起渲染。

神奇的 children - 在線調(diào)試地址

當然，這個優(yōu)化也一樣可以用 React.memo 包裹子組件來做，不過相對的增加維護成本，根據(jù)場景權(quán)衡選擇吧。

Context 讀寫分離

想象一下，現(xiàn)在我們有一個全局日志記錄的需求，我們想通過 Provider 去做，很快代碼就寫好了：

 
 
 
 

  
  
  
  
import React, { useContext, useState } from "react";
  
  
  
  
import "./styles.css";
  
  
  
  

  
  
  
  
const LogContext = React.createContext();
  
  
  
  

  
  
  
  
function LogProvider({ children }) {
  
  
  
  
  const [logs, setLogs] = useState([]);
  
  
  
  
  const addLog = (log) => setLogs((prevLogs) => [...prevLogs, log]);
  
  
  
  
  return (
  
  
  
  
    
  
  
  
  
      {children}
  
  
  
  
    
  
  
  
  
  );
  
  
  
  
}
  
  
  
  

  
  
  
  
function Logger1() {
  
  
  
  
  const { addLog } = useContext(LogContext);
  
  
  
  
  console.log('Logger1 render')
  
  
  
  
  return (
  
  
  
  
    <>
  
  
  
  
      
一個能發(fā)日志的組件1
  
  
  
  
       addLog("logger1")}>發(fā)日志
  
  
  
  
    
  
  
  
  
  );
  
  
  
  
}
  
  
  
  

  
  
  
  
function Logger2() {
  
  
  
  
  const { addLog } = useContext(LogContext);
  
  
  
  
  console.log('Logger2 render')
  
  
  
  
  return (
  
  
  
  
    <>
  
  
  
  
      
一個能發(fā)日志的組件2
  
  
  
  
       addLog("logger2")}>發(fā)日志
  
  
  
  
    
  
  
  
  
  );
  
  
  
  
}
  
  
  
  

  
  
  
  
function LogsPanel() {
  
  
  
  
  const { logs } = useContext(LogContext);
  
  
  
  
  return logs.map((log, index) => {log}
);
  
  
  
  
}
  
  
  
  

  
  
  
  
export default function App() {
  
  
  
  
  return (
  
  
  
  
    
  
  
  
  
      {/* 寫日志 */}
  
  
  
  
      
  
  
  
  
      
  
  
  
  
      {/* 讀日志 */}