React 中的重新渲染实现
作者：阿里巴巴终端技术
本文主要介绍了React 中的重新渲染实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
缘起
React 重新渲染，指的是在类函数中，会重新执行 render 函数，类似 Flutter 中的 build 函数，函数组件中，会重新执行这个函数
React 组件在组件的状态 state 或者组件的属性 props 改变的时候，会重新渲染，条件简单，但是实际上稍不注意，会引起灾难性的重新渲染
类组件
为什么拿类组件先说，怎么说呢，更好理解？还有前几年比较流行的一些常见面试题
React 中的 setState 什么时候是同步的，什么时候是异步的
React setState 怎么获取最新的 state
以下代码的输出值是什么，页面展示是怎么变化的
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>
);
}看到这些类型的面试问题，熟悉 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，页面仅重新渲染一次
};
<button
onClick={this.reactEventCallback}
onClickCapture={this.reactEventCallbackCapture}
>
React Event
</button>
<div>
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 });
};
<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;
};
<div>
S1: {s1} S2: {s2} S3: {s3}
</div>;只是调用 setState，页面会不会重新渲染
几种情况，分别是：
- 直接调用 setState，无参数
- setState，新 state 和老 state 完全一致，也就是同样的 state
sameState = () => {
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-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>
);
}
}函数组件
函数组件重新渲染的条件也和类组件一样，组件的属性 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 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<number>(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();
};
<div>
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;
};
// 在组件中使用，即使只导出了 data，但是 id 变化，同时也会导致组件重新渲染，所以组件在获取到数据的时候，组件会重新渲染两次
const data = useDate();测试代码
// use-data.ts
const 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);
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;规则记不住怎么办？
上面罗列了一大堆情况，但是这些规则难免会记不住，React 事务机制导致的两种完全截然不然的重新渲染机制，确实让人觉得有点恶心，React 官方也注意到了，既然在事务流的中 setState 可以合并，那不在 React 事务流的回调，能不能也合并，答案是可以的，React 官方其实在 React V18 中， setState 能做到合并，即使在异步回调或者定时器回调或者原生事件绑定中，可以把测试代码直接丢 React V18 的环境中尝试，就算是上面列出的会多次渲染的场景，也不会重新渲染多次
具体可以看下这个地址
Automatic batching for fewer renders in React 18
但是，有了 React V18 最好也记录一下以上的规则，对于减少渲染次数还是很有帮助的
到此这篇关于React 中的重新渲染实现的文章就介绍到这了,更多相关React 重新渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！