React 渲染流程
- 执行 render 方法
<div> <div><p>我是段落</p></div> <div><span>我是span</span></div> </div>
- 将
JSX转换成createElement
React.createElement("div", null, React.createElement("div", null, React.createElement("p", null, "我是段落")), React.createElement("div", null, React.createElement("span", null, "我是span")) );
- 执行
createElement创建虚拟 DOM, 得到虚拟 DOM 树
{ targetName: 'div', children:[ { targetName: 'div', children:[ { targetName: 'p' } ] }, { targetName: 'div', children:[ { targetName: 'span' } ] } ] }
- 根据虚拟 DOM 树在界面上生成真实 DOM
React 更新流程
props/state发生改变- render 方法重新执行
- 将
JSX转换成createElement - 利用
createElement重新生成新的虚拟 DOM 树 - 新旧虚拟 DOM 通过
diff 算法进行比较 - 每发现一个不同就生成一个
mutation - 根据
mutation更新真实DOM
React-Diff 算法
- 只会比较同层元素
- 只会比较
同位置元素(默认)
在比较过程中:
- 同类型元素做修改
- 不同类型元素重新创建
官方文档：https://zh-hans.reactjs.org/docs/reconciliation.html#the-diffing-algorithm
React-其它内容-StrictMode
StrictMode 概述
- 作用: 开启
严格模式, 检查后代组件中是否存在潜在问题
注意点:
- 和 Fragment 一样, 不会渲染出任何 UI 元素
- 仅在
开发模式下有效
StrictMode 检查什么
- 检查过时或废弃的属性 / 方法 / ...
检查意外的副作用:
- 检查被包裹的组件当中写的一些逻辑代码会被调用多次时，是否会产生一些副作用
index.js:
import React from "react"; import {createRoot} from "react-dom/client"; import App from "./App"; // 为提供的创建一个 React 根container并返回根。 const root = createRoot(document.getElementById("root")); // 根可用于将 React 元素渲染到 DOM 中 root.render( <React.StrictMode> <App/> </React.StrictMode> );
app.js:
import React from 'react'; class App extends React.PureComponent { constructor(props) { super(props); console.log('constructor'); } render() { return ( <div id={'app'}> <p ref={'myRef'}>我是段落</p> <button onClick={() => { this.btnClick() }}>按钮 </button> </div> ) } btnClick() { console.log(this.refs.myRef); } } export default App;
- 这个组件的
constructor会被调用两次
官方文档
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
