共相

React 再次图形，指的是在类表达式中，会再次继续执行 render 表达式，类似于 Flutter 中的 build 表达式，表达式模块中，会再次继续执行那个表达式

React 模块在模块的状况 state 或是组件的特性 props 发生改变的这时候，会再次图形，前提单纯，但事实上稍不特别注意，会引发毁灭性的再次图形

类模块

为甚么拿类模块先说，是不是说呢，更快认知？除了前一两年较为盛行的许多常用丘托韦

React 中的 setState 甚么这时候是并行的，甚么这时候是触发器的

下列标识符的输入值是甚么，网页展现是是不是变动的

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

(

<button onClick={this.test}>按钮<

/button>

<div>{this.state.s1}</

div>

/div>

);

}

看到这些类型的面试问题，熟悉 React 事务机制的你一定能答出来，毕竟不难嘛，哈？你不知道 React 的事务机制？百度|谷歌|360|搜狗|必应 React 事务机制

React 合成事件

在 React 模块触发的事件会被冒泡到 document(在 react v17 中是 react 挂载的节点，例如 document.querySelector(#app))，然后 React 按照触发路径上收集事件回调，分发事件。

这里是不是突发奇想，如果禁用了，在触发事件的节点，通过原生事件禁止事件冒泡，是不是 React 事件就没法触发了？确实是这样，没法冒泡了，React 都没法收集事件和分发事件了，特别注意那个冒泡不是 React 合成事件的冒泡。发散一下还能想到的另外一个点，React ，就算是在合成捕获阶段触发的事件，依旧在原生冒泡事件触发之后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，网页展现 2，网页仅再次图形一次

};

onClick={this

.reactEventCallback}

onClickCapture={this

.reactEventCallbackCapture}

React Event

/button>

S1: {s1} S2: {s2} S3: {s3}

div>

定时器回调后触发 setState

定时器回调继续执行 setState 是并行的，可以在继续执行 se

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 网页图形 3 次 this.setState({ s2: s2 + 1

});

this.setState({ s3: s3 + 1

});

};

触发器表达式后调触发 setState

触发器表达式回调继续执行 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 网页图形 3 次 this.setState({ s2: s2 + 1

});

this.setState({ s3: s3 + 1

});

};

原生事件触发

原生事件同样不受 React 事务机制影响，所以 setState 表现也是并行的

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 页面图形 3 次 this.setState({ s2: s2 + 1

});

this.setState({ s3: s3 + 1

});

};

<button id=“native-event”>Native Event<

/button>

setState 修改不参与图形的特性

setState 调用就会引发就会模块再次图形，即使那个状况没有参与网页图形，所以，请不要把非图形特性放 state 里面，即使放了 state，也请不要通过 setState 去修改那个状况，直接调用 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

});

// 网页会再次图形 // 网页不会再次图形 this.state.s4 = 2

;

this.s5 = 2

;

};

S1: {s1} S2: {s2} S3: {s3}

/div>;

只是调用 setState，网页会不会再次图形

几种情况，分别是：

直接调用 setState，无参数setState，新 state 和老 state 完全一致，也就是同样的 statesameState =() =>

{

const { s1 } = this

.state;

this

.setState({ s1 });

// 网页会再次图形

};

noParams = () =>

{

this

.setState({});

// 网页会再次图形

};

这两种情况，处理起来和普通的修改状况的 setState 一致，都会引发再次图形的

多次图形的问题

为甚么要提上面这些，仔细看，这里提到了很多次图形的 3 次，较为契合我们日常写标识符的，触发器表达式回调，毕竟在定时器回调或是给模块绑定原生事件（没事找事是吧？），挺少这么做的吧，但触发器回调就很多了，比如网络请求啥的，发生改变个 state 还是挺常用的，但图形多次，就是不行！不过利用 setState 事实上是传一个新对象合并机制，可以把变动的特性合并在新的对象里面，一次性提交全部变更，就不用调用多次 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 网页图形1次

});

};

这样就可以在非 React 的事务流中避开多次图形的问题

测试标识符

import React from react

;

interface

State {

s1: number

;

s2: number

;

s3: number

;

s4: number

;

}

// eslint-disable-next-line @iceworks/best-practices/recommend-functional-componentexport default classTestClassextends 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>

React Event SetState Without Params

button>

S1: {s1} S2: {s2} S3: {s3}

/div>

div>

);

}

表达式模块

表达式模块再次图形的前提也和类模块一样，模块的特性 Props 和模块的状况 State 有修改的这时候，会触发模块再次图形，所以类模块存在的问题，表达式模块同样也存在，而且因为表达式模块的 state 不是一个对象，情况就更糟糕

React 合成事件

const reactEventCallback = () =>

{

// S1 S2 S3 都是 1 setS1((i) => i + 1

);

setS2((i) => i + 1

);

setS3((i) => i + 1

);

// 网页只会图形一次， S1 S2 S3 都是 2

};

定时器回调

const timerCallback = () =>

{

setTimeout(() =>

{

// S1 S2 S3 都是 1 setS1((i) => i + 1

);

setS2((i) => i + 1

);

setS3((i) => i + 1

);

// 网页只会图形三次， S1 S2 S3 都是 2

});

};

触发器表达式回调

const asyncCallback = () =>

{

Promise.resolve().then(() =>

{

// S1 S2 S3 都是 1 setS1((i) => i + 1

);

setS2((i) => i + 1

);

setS3((i) => i + 1

);

// 网页只会图形三次， S1 S2 S3 都是 2

});

};

原生事件

useEffect(() =>

{

const handler = () =>

{

// S1 S2 S3 都是 1 setS1((i) => i + 1

);

setS2((i) => i + 1

);

setS3((i) => i + 1

);

// 网页只会图形三次， S1 S2 S3 都是 2

};

containerRef.current?.addEventListener(click

, handler);

return () =>containerRef.current?.removeEventListener(click

, handler);

}, []);

更新没使用的状况

const[s4, setS4] = useState<number>(1

);

const unuseState = () =>

{

setS4((s) => s + 1

);

// s4 === 2 网页图形一次 S4 网页上没用到

};

总结

以上的全部情况，在 React Hook 中表现的情况和类模块表现完全一致，没有任何差别，但也有表现不一致的地方

不同的情况设置同样的 State

在 React Hook 中设置同样的 State，并不会引发再次图形，这点和类模块不一样，但那个不一定的，引用 React 官方文档说法

如果你更新 State Hook 后的 state 与当前的 state 相同时，React 将跳过子模块的图形并且不会触发 effect 的继续执行。（React 使用 Object.is 较为算法来较为 state。）

需要特别注意的是，React 可能仍需要在跳过图形前图形该模块。不过由于 React 不会对模块树的“深层”节点进行不必要的图形，所以大可不必担心。如果你在图形期间继续执行了高开销的计算，则可以使用 useMemo 来进行优化。

官方稳定有提到，新旧 State 浅较为完全一致是不会再次图形的，但有可能还是会导致再次图形

// React Hookconst sameState = () =>

{

setS1((i) =>

i);

setS2((i) =>

i);

setS3((i) =>

i);

console

.log(renderTimeRef.current);

// 网页并不会再次图形

};

// 类模块中sameState = () =>

{

const { s1, s2, s3 } = this

.state;

this

.setState({ s1 });

this

.setState({ s2 });

this

.setState({ s3 });

console.log(after setState s1:, this

.state.s1);

// 网页会再次图形

};

constsameState =() =>

{

setS1((i) =>

{

const

latestS1 = i;

// latestS1 是当前 S1 最新的值，可以在这里处理许多和 S1 相关的逻辑 return

latestS1;

});

};

React Hook 中避免多次图形

React Hook 中 state 并不是一个对象，所以不会自动合并更新对象，那是不是解决那个触发器表达式之后多次 setState 再次图形的问题？

将全部 state 合并成一个对象

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 是个对象的方法，把全部的 state 合并在一个模块里面，然后需要更新某个特性的这时候，直接调用 setState 即可，和类模块的操作完全一致，这是一种方案

使用 useReducer

虽然那个 hook 的存在感确实低，但多状况的模块用那个来替代 useState 确实不错

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

});

};

具体的用法不展开了，用起来和 redux 差别不大

状况直接用 Ref 声明，需要更新的这时候调用更新的表达式（不推荐）

// S4 不参与图形const [s4, setS4] = useState<number>(1

);

// update 就是 useReducer 的 dispatch，调用就更更新网页，比定义一个不图形的 state 好多了const [, update] = useReducer((c) => c + 1, 0

);

conststate1Ref = useRef(1

);

const state2Ref = useRef(1

);

const unRefSetState = () =>

{

// 优先更新 ref 的值state1Ref.current +=1

;

state2Ref.current += 1

;

setS4((i) => i + 1

);

};

const unRefSetState = () =>

{

// 优先更新 ref 的值state1Ref.current +=1

;

state2Ref.current += 1

;

update();

};

state1Ref: {state1Ref.current} state2Ref: {state2Ref.current}

/div>;

这样做，把真正图形的 state 放到了 ref 里面，这样有个好处，就是表达式里面不用声明那个 state 的依赖了，但坏处非常多，更新的这时候必须说动调用 update，同时把 ref 用来图形也较为奇怪

自定义 Hook

自定义 Hook 如果在模块中使用，任何自定义 Hook 中的状况发生改变，都会引发模块再次图形，包括模块中没用到的，但定义在自定义 Hook 中的状况

单纯的例子，下面的自定义 hook，有 id 和 data 两个状况， id 甚至都没有导出，但 id 发生改变的这时候，还是会导致引用那个 Hook 的模块再次图形

// 一个单纯的自定义 Hook，用来请求数据const useDate = () =>

{

const [id, setid] = useState<number>(0

);

const [data, setData] = useState<any>(null

);

useEffect(() =>

{

fetch(请求数据的 URL

)

.then((r) =>

r.json())

.then((r) =>

{

// 模块再次图形 setid((i) => i + 1

);

// 模块再次再次图形

setData(r);

});

}, []);

return

data;

};

新图形两次const

data = useDate();

测试标识符

// use-data.tsconst useDate = () =>

{

const [id, setid] = useState<number>(0

);

const [data, setData] = useState<any>(null

);

useEffect(() =>

{

fetch(数据请求地址

)

.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

);

conststate1Ref = 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);

constcontainerRef = 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>

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>

S1: {s1} S2: {s2} S3: {s3}

/div>

Merge Object S1: {state.s1} S2: {state.s2} S3: {state.s3}

div>

reducerState Object

S1: {reducerState.s1} S2: {reducerState.s2} S3:{}

{reducerState.s3}

/div>

state1Ref: {state1Ref.current} state2Ref: {state2Ref.current}

div>

/div>

);

};

export default TestHook;

规则记不住怎么办？

上面罗列了一大堆情况，但这些规则难免会记不住，React 事务机制导致的两种完全截然不然的再次图形机制，确实让人觉得有点恶心，React 官方也特别注意到了，既然在事务流的中 setState 可以合并，那不在 React 事务流的回调，能不能也合并，答案是可以的，React 官方其实在 React V18 中， setState 能做到合并，即使在触发器回调或是定时器回调或是原生事件绑定中，可以把测试标识符直接丢 React V18 的环境中尝试，就算是上面列出的会多次图形的场景，也不会再次图形多次

具体可以看下那个地址

Automatic batching for fewer renders in React 18[1]

但，有了 React V18 最好也记录一下以上的规则，对于减少图形次数还是很有帮助的

参考资料

[1]

Automatic batching for fewer renders in React 18: https://github.com/reactwg/react-18/discussions/21

【填问卷抽好礼】

END

企业投身开源，挂羊头卖狗肉行不通

OSC开源社区

，赞 11

这里有最新开源资讯、软件更新、技术干货等内容

点这里 ↓↓↓ 记得关注✔ 标星⭐ 哦~

React中的重新渲染

共相

类模块

React 合成事件

定时器回调后触发 setState

触发器表达式后调触发 setState

原生事件触发

setState 修改不参与图形的特性

只是调用 setState，网页会不会再次图形

多次图形的问题

测试标识符

表达式模块

React 合成事件

定时器回调

触发器表达式回调

原生事件

更新没使用的状况

总结

不同的情况设置同样的 State

React Hook 中避免多次图形

将全部 state 合并成一个对象

使用 useReducer

状况直接用 Ref 声明，需要更新的这时候调用更新的表达式（不推荐）

自定义 Hook

测试标识符

规则记不住怎么办？

参考资料

相关文章

共相

类模块

React 合成事件

定时器回调后触发 setState

触发器表达式后调触发 setState

原生事件触发

setState 修改不参与图形的特性

只是调用 setState，网页会不会再次图形

多次图形的问题

测试标识符

表达式模块

React 合成事件

定时器回调

触发器表达式回调

原生事件

更新没使用的状况

总结

不同的情况 设置同样的 State

React Hook 中避免多次图形

将全部 state 合并成一个对象

使用 useReducer

状况直接用 Ref 声明，需要更新的这时候调用更新的表达式（不推荐）

自定义 Hook

测试标识符

规则记不住怎么办？

参考资料

相关文章

微信

不同的情况设置同样的 State