React 中的重新渲染實(shí)現(xiàn)
緣起
React 重新渲染，指的是在類函數(shù)中，會(huì)重新執(zhí)行 render 函數(shù)，類似 Flutter 中的 build 函數(shù)，函數(shù)組件中，會(huì)重新執(zhí)行這個(gè)函數(shù)
React 組件在組件的狀態(tài) state 或者組件的屬性 props 改變的時(shí)候，會(huì)重新渲染，條件簡(jiǎn)單，但是實(shí)際上稍不注意，會(huì)引起災(zāi)難性的重新渲染
類組件
為什么拿類組件先說(shuō)，怎么說(shuō)呢，更好理解？還有前幾年比較流行的一些常見(jiàn)面試題
React 中的 setState 什么時(shí)候是同步的，什么時(shí)候是異步的
React setState 怎么獲取最新的 state
以下代碼的輸出值是什么，頁(yè)面展示是怎么變化的
? test = () => {
? ? // s1 = 1
? ? const { s1 } = this.state;
? ? this.setState({ s1: s1 + 1});
? ? this.setState({ s1: s1 + 1});
? ? this.setState({ s1: s1 + 1});
? ? console.log(s1)
? };
? render() {
? ? return (
? ? ? <div>
? ? ? ? <button onClick={this.test}>按鈕</button>
? ? ? ? <div>{this.state.s1}</div>
? ? ? </div>
? ? );
? }看到這些類型的面試問(wèn)題，熟悉 React 事務(wù)機(jī)制的你一定能答出來(lái)，畢竟不難嘛，哈？你不知道 React 的事務(wù)機(jī)制？百度|谷歌|360|搜狗|必應(yīng) React 事務(wù)機(jī)制
React 合成事件
在 React 組件觸發(fā)的事件會(huì)被冒泡到 document(在 react v17 中是 react 掛載的節(jié)點(diǎn)，例如 document.querySelector(‘#app’))，然后 React 按照觸發(fā)路徑上收集事件回調(diào)，分發(fā)事件。
- 這里是不是突發(fā)奇想，如果禁用了，在觸發(fā)事件的節(jié)點(diǎn)，通過(guò)原生事件禁止事件冒泡，是不是 React 事件就沒(méi)法觸發(fā)了？確實(shí)是這樣，沒(méi)法冒泡了，React 都沒(méi)法收集事件和分發(fā)事件了，注意這個(gè)冒泡不是 React 合成事件的冒泡。
- 發(fā)散一下還能想到的另外一個(gè)點(diǎn)，React ，就算是在合成捕獲階段觸發(fā)的事件，依舊在原生冒泡事件觸發(fā)之后
reactEventCallback = () => {
? // s1 s2 s3 都是 1
? const { s1, s2, s3 } = this.state;
? this.setState({ s1: s1 + 1 });
? this.setState({ s2: s2 + 1 });
? this.setState({ s3: s3 + 1 });
? console.log('after setState s1:', this.state.s1);
? // 這里依舊輸出 1， 頁(yè)面展示 2，頁(yè)面僅重新渲染一次
};
<button
? onClick={this.reactEventCallback}
? onClickCapture={this.reactEventCallbackCapture}
>
? React Event
</button>
<div>
? S1: {s1} S2: {s2} S3: {s3}
</div>定時(shí)器回調(diào)后觸發(fā) setState
定時(shí)器回調(diào)執(zhí)行 setState 是同步的，可以在執(zhí)行 setState 之后直接獲取，最新的值，例如下面代碼
timerCallback = () => {
setTimeout(() => {
// s1 s2 s3 都是 1
const { s1, s2, s3 } = this.state;
this.setState({ s1: s1 + 1 });
console.log('after setState s1:', this.state.s1);
// 輸出 2 頁(yè)面渲染 3 次
this.setState({ s2: s2 + 1 });
this.setState({ s3: s3 + 1 });
});
};
異步函數(shù)后調(diào)觸發(fā) setState
異步函數(shù)回調(diào)執(zhí)行 setState 是同步的，可以在執(zhí)行 setState 之后直接獲取，最新的值，例如下面代碼
asyncCallback = () => {
Promise.resolve().then(() => {
// s1 s2 s3 都是 1
const { s1, s2, s3 } = this.state;
this.setState({ s1: s1 + 1 });
console.log('after setState s1:', this.state.s1);
// 輸出 2 頁(yè)面渲染 3 次
this.setState({ s2: s2 + 1 });
this.setState({ s3: s3 + 1 });
});
};
原生事件觸發(fā)
原生事件同樣不受 React 事務(wù)機(jī)制影響，所以 setState 表現(xiàn)也是同步的
componentDidMount() {
? const btn1 = document.getElementById('native-event');
? btn1?.addEventListener('click', this.nativeCallback);
}
nativeCallback = () => {
? // s1 s2 s3 都是 1
? const { s1, s2, s3 } = this.state;
? this.setState({ s1: s1 + 1 });
? console.log('after setState s1:', this.state.s1);
? // 輸出 2 頁(yè)面渲染 3 次
? this.setState({ s2: s2 + 1 });
? this.setState({ s3: s3 + 1 });
};
<button id="native-event">Native Event</button>setState 修改不參與渲染的屬性
setState 調(diào)用就會(huì)引起就會(huì)組件重新渲染，即使這個(gè)狀態(tài)沒(méi)有參與頁(yè)面渲染，所以，請(qǐng)不要把非渲染屬性放 state 里面，即使放了 state，也請(qǐng)不要通過(guò) setState 去修改這個(gè)狀態(tài)，直接調(diào)用 this.state.xxx = xxx 就好，這種不參與渲染的屬性，直接掛在 this 上就好，參考下圖
// s1 s2 s3 為渲染的屬性，s4 非渲染屬性
state = {
? s1: 1,
? s2: 1,
? s3: 1,
? s4: 1,
};
s5 = 1;
changeNotUsedState = () => {
? const { s4 } = this.state;
? this.setState({ s4: s4 + 1 });
? // 頁(yè)面會(huì)重新渲染
? // 頁(yè)面不會(huì)重新渲染
? this.state.s4 = 2;
? this.s5 = 2;
};
<div>
? S1: {s1} S2: {s2} S3: {s3}
</div>;只是調(diào)用 setState，頁(yè)面會(huì)不會(huì)重新渲染
幾種情況，分別是：
- 直接調(diào)用 setState，無(wú)參數(shù)
- setState，新 state 和老 state 完全一致，也就是同樣的 state
sameState = () => {
? const { s1 } = this.state;
? this.setState({ s1 });
? // 頁(yè)面會(huì)重新渲染
};
noParams = () => {
? this.setState({});
? // 頁(yè)面會(huì)重新渲染
};這兩種情況，處理起來(lái)和普通的修改狀態(tài)的 setState 一致，都會(huì)引起重新渲染的
多次渲染的問(wèn)題
為什么要提上面這些，仔細(xì)看，這里提到了很多次渲染的 3 次，比較契合我們?nèi)粘?xiě)代碼的，異步函數(shù)回調(diào)，畢竟在定時(shí)器回調(diào)或者給組件綁定原生事件（沒(méi)事找事是吧？），挺少這么做的吧，但是異步回調(diào)就很多了，比如網(wǎng)絡(luò)請(qǐng)求啥的，改變個(gè) state 還是挺常見(jiàn)的，但是渲染多次，就是不行！不過(guò)利用 setState 實(shí)際上是傳一個(gè)新對(duì)象合并機(jī)制，可以把變化的屬性合并在新的對(duì)象里面，一次性提交全部變更，就不用調(diào)用多次 setState 了
asyncCallbackMerge = () => {
Promise.resolve().then(() => {
const { s1, s2, s3 } = this.state;
this.setState({ s1: s1 + 1, s2: s2 + 1, s3: s3 + 1 });
console.log('after setState s1:', this.state.s1);
// 輸出 2 頁(yè)面渲染1次
});
};
這樣就可以在非 React 的事務(wù)流中避開(kāi)多次渲染的問(wèn)題
測(cè)試代碼
import React from 'react';
interface State {
? s1: number;
? s2: number;
? s3: number;
? s4: number;
}
// eslint-disable-next-line @iceworks/best-practices/recommend-functional-component
export default class TestClass extends React.Component<any, State> {
? renderTime: number;
? constructor(props: any) {
? ? super(props);
? ? this.renderTime = 0;
? ? this.state = {
? ? ? s1: 1,
? ? ? s2: 1,
? ? ? s3: 1,
? ? ? s4: 1,
? ? };
? }
? componentDidMount() {
? ? const btn1 = document.getElementById('native-event');
? ? const btn2 = document.getElementById('native-event-async');
? ? btn1?.addEventListener('click', this.nativeCallback);
? ? btn2?.addEventListener('click', this.nativeCallbackMerge);
? }
? changeNotUsedState = () => {
? ? const { s4 } = this.state;
? ? this.setState({ s4: s4 + 1 });
? };
? reactEventCallback = () => {
? ? const { s1, s2, s3 } = this.state;
? ? this.setState({ s1: s1 + 1 });
? ? this.setState({ s2: s2 + 1 });
? ? this.setState({ s3: s3 + 1 });
? ? console.log('after setState s1:', this.state.s1);
? };
? timerCallback = () => {
? ? setTimeout(() => {
? ? ? const { s1, s2, s3 } = this.state;
? ? ? this.setState({ s1: s1 + 1 });
? ? ? console.log('after setState s1:', this.state.s1);
? ? ? this.setState({ s2: s2 + 1 });
? ? ? this.setState({ s3: s3 + 1 });
? ? });
? };
? asyncCallback = () => {
? ? Promise.resolve().then(() => {
? ? ? const { s1, s2, s3 } = this.state;
? ? ? this.setState({ s1: s1 + 1 });
? ? ? console.log('after setState s1:', this.state.s1);
? ? ? this.setState({ s2: s2 + 1 });
? ? ? this.setState({ s3: s3 + 1 });
? ? });
? };
? nativeCallback = () => {
? ? const { s1, s2, s3 } = this.state;
? ? this.setState({ s1: s1 + 1 });
? ? console.log('after setState s1:', this.state.s1);
? ? this.setState({ s2: s2 + 1 });
? ? this.setState({ s3: s3 + 1 });
? };
? timerCallbackMerge = () => {
? ? setTimeout(() => {
? ? ? const { s1, s2, s3 } = this.state;
? ? ? this.setState({ s1: s1 + 1, s2: s2 + 1, s3: s3 + 1 });
? ? ? console.log('after setState s1:', this.state.s1);
? ? });
? };
? asyncCallbackMerge = () => {
? ? Promise.resolve().then(() => {
? ? ? const { s1, s2, s3 } = this.state;
? ? ? this.setState({ s1: s1 + 1, s2: s2 + 1, s3: s3 + 1 });
? ? ? console.log('after setState s1:', this.state.s1);
? ? });
? };
? nativeCallbackMerge = () => {
? ? const { s1, s2, s3 } = this.state;
? ? this.setState({ s1: s1 + 1, s2: s2 + 1, s3: s3 + 1 });
? ? console.log('after setState s1:', this.state.s1);
? };
? sameState = () => {
? ? const { s1, s2, s3 } = this.state;
? ? this.setState({ s1 });
? ? this.setState({ s2 });
? ? this.setState({ s3 });
? ? console.log('after setState s1:', this.state.s1);
? };
? withoutParams = () => {
? ? this.setState({});
? };
? render() {
? ? console.log('renderTime', ++this.renderTime);
? ? const { s1, s2, s3 } = this.state;
? ? return (
? ? ? <div className="test">
? ? ? ? <button onClick={this.reactEventCallback}>React Event</button>
? ? ? ? <button onClick={this.timerCallback}>Timer Callback</button>
? ? ? ? <button onClick={this.asyncCallback}>Async Callback</button>
? ? ? ? <button id="native-event">Native Event</button>
? ? ? ? <button onClick={this.timerCallbackMerge}>Timer Callback Merge</button>
? ? ? ? <button onClick={this.asyncCallbackMerge}>Async Callback Merge</button>
? ? ? ? <button id="native-event-async">Native Event Merge</button>
? ? ? ? <button onClick={this.changeNotUsedState}>Change Not Used State</button>
? ? ? ? <button onClick={this.sameState}>React Event Set Same State</button>
? ? ? ? <button onClick={this.withoutParams}>
? ? ? ? ? React Event SetState Without Params
? ? ? ? </button>
? ? ? ? <div>
? ? ? ? ? S1: {s1} S2: {s2} S3: {s3}
? ? ? ? </div>
? ? ? </div>
? ? );
? }
}函數(shù)組件
函數(shù)組件重新渲染的條件也和類組件一樣，組件的屬性 Props 和組件的狀態(tài) State 有修改的時(shí)候，會(huì)觸發(fā)組件重新渲染，所以類組件存在的問(wèn)題，函數(shù)組件同樣也存在，而且因?yàn)楹瘮?shù)組件的 state 不是一個(gè)對(duì)象，情況就更糟糕
React 合成事件
const reactEventCallback = () => {
? // S1 S2 S3 都是 1
? setS1((i) => i + 1);
? setS2((i) => i + 1);
? setS3((i) => i + 1);
? // 頁(yè)面只會(huì)渲染一次， S1 S2 S3 都是 2
};定時(shí)器回調(diào)
const timerCallback = () => {
setTimeout(() => {
// S1 S2 S3 都是 1
setS1((i) => i + 1);
setS2((i) => i + 1);
setS3((i) => i + 1);
// 頁(yè)面只會(huì)渲染三次， S1 S2 S3 都是 2
});
};
異步函數(shù)回調(diào)
const asyncCallback = () => {
Promise.resolve().then(() => {
// S1 S2 S3 都是 1
setS1((i) => i + 1);
setS2((i) => i + 1);
setS3((i) => i + 1);
// 頁(yè)面只會(huì)渲染三次， S1 S2 S3 都是 2
});
};
原生事件
useEffect(() => {
const handler = () => {
// S1 S2 S3 都是 1
setS1((i) => i + 1);
setS2((i) => i + 1);
setS3((i) => i + 1);
// 頁(yè)面只會(huì)渲染三次， S1 S2 S3 都是 2
};
containerRef.current?.addEventListener('click', handler);
return () => containerRef.current?.removeEventListener('click', handler);
}, []);
更新沒(méi)使用的狀態(tài)
const [s4, setS4] = useState<number>(1);
const unuseState = () => {
setS4((s) => s + 1);
// s4 === 2 頁(yè)面渲染一次 S4 頁(yè)面上沒(méi)用到
};
總結(jié)
以上的全部情況，在 React Hook 中表現(xiàn)的情況和類組件表現(xiàn)完全一致，沒(méi)有任何差別，但是也有表現(xiàn)不一致的地方
不同的情況 設(shè)置同樣的 State
在 React Hook 中設(shè)置同樣的 State，并不會(huì)引起重新渲染，這點(diǎn)和類組件不一樣，但是這個(gè)不一定的，引用 React 官方文檔說(shuō)法
如果你更新 State Hook 后的 state 與當(dāng)前的 state 相同時(shí)，React 將跳過(guò)子組件的渲染并且不會(huì)觸發(fā) effect 的執(zhí)行。（React 使用 Object.is 比較算法 來(lái)比較 state。）
需要注意的是，React 可能仍需要在跳過(guò)渲染前渲染該組件。不過(guò)由于 React 不會(huì)對(duì)組件樹(shù)的“深層”節(jié)點(diǎn)進(jìn)行不必要的渲染，所以大可不必?fù)?dān)心。如果你在渲染期間執(zhí)行了高開(kāi)銷(xiāo)的計(jì)算，則可以使用 useMemo 來(lái)進(jìn)行優(yōu)化。
官方穩(wěn)定有提到，新舊 State 淺比較完全一致是不會(huì)重新渲染的，但是有可能還是會(huì)導(dǎo)致重新渲染
// React Hook
const sameState = () => {
? setS1((i) => i);
? setS2((i) => i);
? setS3((i) => i);
? console.log(renderTimeRef.current);
? // 頁(yè)面并不會(huì)重新渲染
};
// 類組件中
sameState = () => {
? const { s1, s2, s3 } = this.state;
? this.setState({ s1 });
? this.setState({ s2 });
? this.setState({ s3 });
? console.log('after setState s1:', this.state.s1);
? // 頁(yè)面會(huì)重新渲染
};這個(gè)特性存在，有些時(shí)候想要獲取最新的 state，又不想給某個(gè)函數(shù)添加 state 依賴或者給 state 添加一個(gè) useRef，可以通過(guò)這個(gè)函數(shù)去或者這個(gè) state 的最新值
const sameState = () => {
setS1((i) => {
const latestS1 = i;
// latestS1 是當(dāng)前 S1 最新的值，可以在這里處理一些和 S1 相關(guān)的邏輯
return latestS1;
});
};
React Hook 中避免多次渲染
React Hook 中 state 并不是一個(gè)對(duì)象，所以不會(huì)自動(dòng)合并更新對(duì)象，那怎么解決這個(gè)異步函數(shù)之后多次 setState 重新渲染的問(wèn)題？
將全部 state 合并成一個(gè)對(duì)象
const [state, setState] = useState({ s1: 1, s2: 1, s3: 1 });
setState((prevState) => {
setTimeout(() => {
const { s1, s2, s3 } = prevState;
return { ...prevState, s1: s1 + 1, s2: s2 + 1, s3: s3 + 1 };
});
});
參考類的的 this.state 是個(gè)對(duì)象的方法，把全部的 state 合并在一個(gè)組件里面，然后需要更新某個(gè)屬性的時(shí)候，直接調(diào)用 setState 即可，和類組件的操作完全一致，這是一種方案
使用 useReducer
雖然這個(gè) hook 的存在感確實(shí)低，但是多狀態(tài)的組件用這個(gè)來(lái)替代 useState 確實(shí)不錯(cuò)
const initialState = { s1: 1, s2: 1, s3: 1 };
function reducer(state, action) {
? switch (action.type) {
? ? case 'update':
? ? ? return { s1: state.s1 + 1, s2: state.s2 + 1, s3: state.s3 + 1 };
? ? default:
? ? ? return state;
? }
}
const [reducerState, dispatch] = useReducer(reducer, initialState);
const reducerDispatch = () => {
? setTimeout(() => {
? ? dispatch({ type: 'update' });
? });
};具體的用法不展開(kāi)了，用起來(lái)和 redux 差別不大
狀態(tài)直接用 Ref 聲明，需要更新的時(shí)候調(diào)用更新的函數(shù)（不推薦）
// S4 不參與渲染
const [s4, setS4] = useState<number>(1);
// update 就是 useReducer 的 dispatch，調(diào)用就更更新頁(yè)面，比定義一個(gè)不渲染的 state 好多了
const [, update] = useReducer((c) => c + 1, 0);
const state1Ref = useRef(1);
const state2Ref = useRef(1);
const unRefSetState = () => {
? // 優(yōu)先更新 ref 的值
? state1Ref.current += 1;
? state2Ref.current += 1;
? setS4((i) => i + 1);
};
const unRefSetState = () => {
? // 優(yōu)先更新 ref 的值
? state1Ref.current += 1;
? state2Ref.current += 1;
? update();
};
<div>
? state1Ref: {state1Ref.current} state2Ref: {state2Ref.current}
</div>;這樣做，把真正渲染的 state 放到了 ref 里面，這樣有個(gè)好處，就是函數(shù)里面不用聲明這個(gè) state 的依賴了，但是壞處非常多，更新的時(shí)候必須說(shuō)動(dòng)調(diào)用 update，同時(shí)把 ref 用來(lái)渲染也比較奇怪
自定義 Hook
自定義 Hook 如果在組件中使用，任何自定義 Hook 中的狀態(tài)改變，都會(huì)引起組件重新渲染，包括組件中沒(méi)用到的，但是定義在自定義 Hook 中的狀態(tài)
簡(jiǎn)單的例子，下面的自定義 hook，有 id 和 data 兩個(gè)狀態(tài)， id 甚至都沒(méi)有導(dǎo)出，但是 id 改變的時(shí)候，還是會(huì)導(dǎo)致引用這個(gè) Hook 的組件重新渲染
// 一個(gè)簡(jiǎn)單的自定義 Hook，用來(lái)請(qǐng)求數(shù)據(jù)
const useDate = () => {
? const [id, setid] = useState<number>(0);
? const [data, setData] = useState<any>(null);
? useEffect(() => {
? ? fetch('請(qǐng)求數(shù)據(jù)的 URL')
? ? ? .then((r) => r.json())
? ? ? .then((r) => {
? ? ? ? // 組件重新渲染
? ? ? ? setid((i) => i + 1);
? ? ? ? // 組件再次重新渲染
? ? ? ? setData(r);
? ? ? });
? }, []);
? return data;
};
// 在組件中使用，即使只導(dǎo)出了 data，但是 id 變化，同時(shí)也會(huì)導(dǎo)致組件重新渲染，所以組件在獲取到數(shù)據(jù)的時(shí)候，組件會(huì)重新渲染兩次
const data = useDate();測(cè)試代碼
// use-data.ts
const useDate = () => {
? const [id, setid] = useState<number>(0);
? const [data, setData] = useState<any>(null);
? useEffect(() => {
? ? fetch('數(shù)據(jù)請(qǐng)求地址')
? ? ? .then((r) => r.json())
? ? ? .then((r) => {
? ? ? ? setid((i) => i + 1);
? ? ? ? setData(r);
? ? ? });
? }, []);
? return data;
};
import { useEffect, useReducer, useRef, useState } from 'react';
import useDate from './use-data';
const initialState = { s1: 1, s2: 1, s3: 1 };
function reducer(state, action) {
? switch (action.type) {
? ? case 'update':
? ? ? return { s1: state.s1 + 1, s2: state.s2 + 1, s3: state.s3 + 1 };
? ? default:
? ? ? return state;
? }
}
const TestHook = () => {
? const renderTimeRef = useRef<number>(0);
? const [s1, setS1] = useState<number>(1);
? const [s2, setS2] = useState<number>(1);
? const [s3, setS3] = useState<number>(1);
? const [s4, setS4] = useState<number>(1);
? const [, update] = useReducer((c) => c + 1, 0);
? const state1Ref = useRef(1);
? const state2Ref = useRef(1);
? const data = useDate();
? const [state, setState] = useState({ s1: 1, s2: 1, s3: 1 });
? const [reducerState, dispatch] = useReducer(reducer, initialState);
? const containerRef = useRef<HTMLButtonElement>(null);
? const reactEventCallback = () => {
? ? setS1((i) => i + 1);
? ? setS2((i) => i + 1);
? ? setS3((i) => i + 1);
? };
? const timerCallback = () => {
? ? setTimeout(() => {
? ? ? setS1((i) => i + 1);
? ? ? setS2((i) => i + 1);
? ? ? setS3((i) => i + 1);
? ? });
? };
? const asyncCallback = () => {
? ? Promise.resolve().then(() => {
? ? ? setS1((i) => i + 1);
? ? ? setS2((i) => i + 1);
? ? ? setS3((i) => i + 1);
? ? });
? };
? const unuseState = () => {
? ? setS4((i) => i + 1);
? };
? const unRefSetState = () => {
? ? state1Ref.current += 1;
? ? state2Ref.current += 1;
? ? setS4((i) => i + 1);
? };
? const unRefReducer = () => {
? ? state1Ref.current += 1;
? ? state2Ref.current += 1;
? ? update();
? };
? const sameState = () => {
? ? setS1((i) => i);
? ? setS2((i) => i);
? ? setS3((i) => i);
? ? console.log(renderTimeRef.current);
? };
? const mergeObjectSetState = () => {
? ? setTimeout(() => {
? ? ? setState((prevState) => {
? ? ? ? const { s1: prevS1, s2: prevS2, s3: prevS3 } = prevState;
? ? ? ? return { ...prevState, s1: prevS1 + 1, s2: prevS2 + 1, s3: prevS3 + 1 };
? ? ? });
? ? });
? };
? const reducerDispatch = () => {
? ? setTimeout(() => {
? ? ? dispatch({ type: 'update' });
? ? });
? };
? useEffect(() => {
? ? const handler = () => {
? ? ? setS1((i) => i + 1);
? ? ? setS2((i) => i + 1);
? ? ? setS3((i) => i + 1);
? ? };
? ? containerRef.current?.addEventListener('click', handler);
? ? return () => containerRef.current?.removeEventListener('click', handler);
? }, []);
? console.log('render Time Hook', ++renderTimeRef.current);
? console.log('data', data);
? return (
? ? <div className="test">
? ? ? <button onClick={reactEventCallback}>React Event</button>
? ? ? <button onClick={timerCallback}>Timer Callback</button>
? ? ? <button onClick={asyncCallback}>Async Callback</button>
? ? ? <button id="native-event" ref={containerRef}>
? ? ? ? Native Event
? ? ? </button>
? ? ? <button onClick={unuseState}>Unuse State</button>
? ? ? <button onClick={sameState}>Same State</button>
? ? ? <button onClick={mergeObjectSetState}>Merge State Into an Object</button>
? ? ? <button onClick={reducerDispatch}>Reducer Dispatch</button>
? ? ? <button onClick={unRefSetState}>useRef As State With useState</button>
? ? ? <button onClick={unRefSetState}>useRef As State With useReducer</button>
? ? ? <div>
? ? ? ? S1: {s1} S2: {s2} S3: {s3}
? ? ? </div>
? ? ? <div>
? ? ? ? Merge Object S1: {state.s1} S2: {state.s2} S3: {state.s3}
? ? ? </div>
? ? ? <div>
? ? ? ? reducerState Object S1: {reducerState.s1} S2: {reducerState.s2} S3:{' '}
? ? ? ? {reducerState.s3}
? ? ? </div>
? ? ? <div>
? ? ? ? state1Ref: {state1Ref.current} state2Ref: {state2Ref.current}
? ? ? </div>
? ? </div>
? );
};
export default TestHook;規(guī)則記不住怎么辦？
上面羅列了一大堆情況，但是這些規(guī)則難免會(huì)記不住，React 事務(wù)機(jī)制導(dǎo)致的兩種完全截然不然的重新渲染機(jī)制，確實(shí)讓人覺(jué)得有點(diǎn)惡心，React 官方也注意到了，既然在事務(wù)流的中 setState 可以合并，那不在 React 事務(wù)流的回調(diào)，能不能也合并，答案是可以的，React 官方其實(shí)在 React V18 中， setState 能做到合并，即使在異步回調(diào)或者定時(shí)器回調(diào)或者原生事件綁定中，可以把測(cè)試代碼直接丟 React V18 的環(huán)境中嘗試，就算是上面列出的會(huì)多次渲染的場(chǎng)景，也不會(huì)重新渲染多次
具體可以看下這個(gè)地址
Automatic batching for fewer renders in React 18
但是，有了 React V18 最好也記錄一下以上的規(guī)則，對(duì)于減少渲染次數(shù)還是很有幫助的
到此這篇關(guān)于React 中的重新渲染實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)React 重新渲染內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
react實(shí)現(xiàn)每隔60s刷新一次接口的示例代碼
本文主要介紹了react實(shí)現(xiàn)每隔60s刷新一次接口的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
react實(shí)現(xiàn)記錄拖動(dòng)排序
這篇文章主要介紹了react實(shí)現(xiàn)記錄拖動(dòng)排序的相關(guān)資料,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了React獲取url后面參數(shù)的值示例代碼,代碼簡(jiǎn)單易懂，文末給大家補(bǔ)充介紹了react獲取URL中參數(shù)方法，需要的朋友可以參考下2022-12-12
如何將你的AngularJS1.x應(yīng)用遷移至React的方法
本篇文章主要介紹了如何將你的AngularJS1.x應(yīng)用遷移至React的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
React配置代理服務(wù)器的5種方法及使用場(chǎng)景
這篇文章主要介紹了React配置代理服務(wù)器的5種方法,無(wú)論使用哪種方法,都需要確保代理服務(wù)器的地址和端口正確,并且在配置完成后重新啟動(dòng)React開(kāi)發(fā)服務(wù)器,使配置生效,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細(xì)介紹了React使用State?Hook的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
Mobx是一個(gè)前端“狀態(tài)管理框架”，狀態(tài)管理就是將分布在各個(gè)組件、各個(gè)模塊中的狀態(tài)的變化，按照一定的規(guī)則，進(jìn)行統(tǒng)一的管理，這篇文章主要介紹了React中如何使用Mobx,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了React性能優(yōu)化方法總結(jié)，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要介紹了react 中父組件與子組件雙向綁定問(wèn)題，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
react實(shí)現(xiàn)瀏覽器自動(dòng)刷新的示例代碼
這篇文章主要介紹了react實(shí)現(xiàn)瀏覽器自動(dòng)刷新的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04