React中的重新渲染

缘起

React重新渲染，指的是在类函数中，会重新执行render函数，类似Flutter中的build函数，函数组件中，会重新执行这个函数

React组件在组件的状态state或者组件的属性props改变的时候，会重新渲染，条件简单，但是实际上稍不注意，会引起灾难性的重新渲染

类组件

为什么拿类组件先说，怎么说呢，更好理解？还有前几年比较流行的一些常见面试题

React 中的 setState 什么时候是同步的，什么时候是异步的

React setState 怎么获取最新的 state

以下代码的输出值是什么，页面展示是怎么变化的

render() {
return (



this.test}>按钮


{this.state.s1}div>
);
}


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

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

• 这里是不是突发奇想，如果禁用了，在触发事件的节点，通过原生事件禁止事件冒泡，是不是React事件就没法触发了？确实是这样，没法冒泡了，React都没法收集事件和分发事件了，注意这个冒泡不是React合成事件的冒泡。

• 发散一下还能想到的另外一个点，React，就算是在合成捕获阶段触发的事件，依旧在原生冒泡事件触发之后

onClick={this.reactEventCallback}
onClickCapture={this.reactEventCallbackCapture}
>
React Event



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


定时器回调后触发setState

定时器回调执行setState是同步的，可以在执行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 页面渲染 3 次
this.setState({ s2: s2 + 1 });
this.setState({ s3: s3 + 1 });

异步函数后调触发setState

异步函数回调执行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 });
};

"native-event">Native Event
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}
;


只是调用setState，页面会不会重新渲染

几种情况，分别是：

• 直接调用setState，无参数

• setState，新state和老state完全一致，也就是同样的state

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-component
export default class TestClass extends React.Component {
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 (


"test">
this.reactEventCallback}>React Event
Timer Callbackbutton>
this.asyncCallback}>Async Callback
Native Eventbutton>
this.timerCallbackMerge}>Timer Callback Merge
Async Callback Mergebutton>
"native-event-async">Native Event Merge
Change Not Used Statebutton>
this.sameState}>React Event Set Same State

React Event SetState Without Params
button>



S1: {s1} S2: {s2} S3: {s3}
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(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 Hook
const 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);
// 页面会重新渲染
};


这个特性存在，有些时候想要获取最新的state，又不想给某个函数添加state依赖或者给state添加一个useRef，可以通过这个函数去或者这个state的最新值

const sameState = () => {
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(1);
// update 就是 useReducer 的 dispatch，调用就更更新页面，比定义一个不渲染的 state 好多了
const [, update] = useReducer((c) => c + 1, 0);
const state1Ref = 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}
;


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

自定义Hook

自定义Hook如果在组件中使用，任何自定义Hook中的状态改变，都会引起组件重新渲染，包括组件中没用到的，但是定义在自定义Hook中的状态

简单的例子，下面的自定义hook，有id和data两个状态，id甚至都没有导出，但是id改变的时候，还是会导致引用这个Hook的组件重新渲染

// 一个简单的自定义 Hook，用来请求数据
const useDate = () => {
const [id, setid] = useState(0);
const [data, setData] = useState(null);

useEffect(() => {
fetch('请求数据的 URL')
.then((r) => r.json())
.then((r) => {
// 组件重新渲染
setid((i) => i + 1);
// 组件再次重新渲染
setData(r);
});
}, []);

return data;
};

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(0);
const [s1, setS1] = useState(1);
const [s2, setS2] = useState(1);
const [s3, setS3] = useState(1);
const [s4, setS4] = useState(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(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 (


"test">
React Event
Timer Callbackbutton>
Async Callback

Native Event
button>
Unuse State
Same Statebutton>
Merge State Into an Object
Reducer Dispatchbutton>
useRef As State With useState
useRef As State With useReducerbutton>



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



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



reducerState Object S1: {reducerState.s1} S2: {reducerState.s2} S3:{' '}
{reducerState.s3}



state1Ref: {state1Ref.current} state2Ref: {state2Ref.current}
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最好也记录一下以上的规则，对于减少渲染次数还是很有帮助的

参考资料

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

【填问卷 抽好礼】

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

// 在组件中使用，即使只导出了 data，但是 id 变化，同时也会导致组件重新渲染，所以组件在获取到数据的时候，组件会重新渲染两次
const data = useDate();
测试代码// use-data.ts
const useDate = () => {
const [id, setid] = useState(0);
const [data, setData] = useState(null);