--- theme: channing-cyan highlight: atom-one-dark --- 平时我们进行业务开发可能不会遇到这种状况。但是当我们需要封装一个比较复杂一点的组件，比如 Tree、Table 等。因为基本不用`zustand`或者`react-redux`。我们往往要在组件内部自己维护一个`管理者`来帮我们处理组件内部的数据。但是处理数据其实 `react` 不会感知到也不会重渲染，这里有一个套路。那么当你学会了这个套路之后，开发组件就能变的更加游刃有余 ## 🤖 例子：假设我们现在要封装一个 `Tree` 组件 ### 🚀 第一步：创建一个管理数据的管理者，把`treeData`给`TreeManager`保存 ```js class TreeManager { constructor(treeData) { this.treeData = treeData; } } ``` `treeManager`存在 `Provider`里备用，通过`useContext(TreeManagerContext)`在所有的子组件使用 ```js const treeData = [{ name: 'A' }, { name: 'B' }]; function Tree() { const [treeManager, _] = useState(() => new TreeManager(treeData)); return ( 子组件都能拿到treeManager ); } ``` ### 🚀 第二步：创建一个`row`组件通过`useTreeNode`,拿到`TreeManager.treeData`数组里面对应的项，展示`name`属性 ```js function Row(props) { const { index } = props; const treeNode = useTreeNode(index); return

{treeNode.name}

; } ``` ### 🚀 第三步：我们现在写死这个树只有两个``分别对应上面`treeManager.treeData` 的 `[{ name: 'A' }, { name: 'B' }]` 数组的两项 ```js function Tree() { const [treeManager, _] = useState(() => new TreeManager(treeData)); return ( + + ); } ``` 问题来了，现在我这么做，调用 `treeManager.edit()` 修改了 `treeData` 数组第一项的 `name` 从 `A` 改为 `许泽川` 先别看代码，我们要的效果是不是这样的，修改到的那一项对应的 `Row` 组件重渲染，没修改到的 `Row` 组件不重渲染，也就是说 1. `` 重渲染，从`A`变成`许泽川` 2. 而``不重渲染还是显示 `B` ```js class TreeManager { constructor(treeData) { this.treeData = treeData } + edit() { + this.treeData[0].name = '许泽川' + } } ``` ```js function Tree() { const [treeManager, _] = useState(() => new TreeManager(treeData)); + treeManager.edit() return ( ); } ``` ## 🤖 怎么做到这种按需渲染呢？ ### 1. 看一下我的 `useTreeNode` 怎么实现的 ```js function useTreeNode(index) { const treeNodeManager = useContext(TreeManagerContext); const treeNode = useSyncExternalStore( treeNodeManager.subscribe, () => treeNodeManager.data[index], () => treeNodeManager.data[index] ); return treeNode; } ``` **下面这段话就是本篇重点，看完大概 `useSyncExternalStore` 就了解了** 1. 里面用到了 `useSyncExternalStore`，他的原理简单来说就是，`useSyncExternalStore` 内部会通过你传入的这个函数 `() => treeNodeManager.data[index]` 拿到值给你，就是这么简单 2. 但是 `useSyncExternalStore` 额外搞了一点小动作，他通过你提供的管理库的订阅函数 `treeNodeManager.subscribe`，订阅一个回调函数给 `treeNodeManager` 3. 只要你触发了这个回调，他就会重新调用 `() => treeNodeManager.data[index]` 拿到最新值，跟上一次拿到的值做对比，如果变了，就会让用到这个 `useSyncExternalStore` 的函数组件重渲染 > 你看看，他聪明的，会做对比，变化了的项才重渲染，这不就是 `按需渲染` 吗？ ### 2. 那怎么触发回调，什么时候触发回调呢？所以我们需要稍微修改一下 `treeNodeManager`，简简单单加一个观察者模式修改完数据后，都调用一下这个回调 **一切这不就齐活了，懂了吗您？** ```js class TreeManager { constructor(treeData) { this.treeData = treeData } edit() { this.treeData[0].name = '许泽川' this.listeners.forEach(listener => listener()) } listeners = [] subscribe(callback) { this.listeners.push(callback) } } ``` ## 🤖 相关 > [面试官：让你实现一个高性能 Tree 组件磕磕绊绊的，你好意思干了三年前端？我：😭](https://juejin.cn/post/7440850542584315955) > > [面试官：你说你做过组件库，肯定了解过复杂组件状态管理的useSyncExternalStore吧？我：😭](https://juejin.cn/post/7433419085156614196) > > [面试官：你跟我说 setState 是同步的，它不是异步的吗？背错面试题了吧你！我：😭](https://juejin.cn/post/7434716832313589769) > > [面试官：你说你开发过组件库，那你怎么会不知道受控组件？面试就到这里吧。我：😭](https://juejin.cn/post/7435658216656863242) > 版权归许泽川所有 > > 如需转载，请提前询问本人的许可