cherry__yu的博客

即在react中，我们绑定的事件onClick等，并不是原生事件，而是由原生事件合成的React事件，比如 click 事件合成为 onClick 事件。react 的所有事件并没有绑定到具体的dom节点上而是绑定在了 document 上，然后由统一的事件处理程序来处理，同时也是基于浏览器的事件机制（冒泡），所有节点的事件都会在 document 上触发。react 事件机制基本理解：react 基于浏览器的事件机制，自身实现了一套自己的事件机制，包括事件注册、事件的合成、事件冒泡、事件派发等。

参考： https://github.com/facebook/react/releases + 一些博客文章。2016.4 React15: 之前都是 v0.xx，到这时候直接变成 v15，可见对这个库的重视和发展意图。2017.9 React16.0: 主要是引入了异步渲染和 React Fiber，提高了渲染性能。2019.2 React16.8: 主要引入了 Hooks。2018.3 React16.3: 主要生命周期的改变。2020.10 React17: 过度版本。

自定义 Hook 就是自己封装的函数功能和 react 中内置的 Hook 进行结合，用于组件间共享逻辑，本质是一个函数。自定义 Hook 必须以 use 开头。// 自定义 Hook：用于跟踪组件的宽度变化// 定义函数来更新组件宽度// 添加事件监听器来在窗口大小变化时更新宽度// 初始化时获取一次宽度// 在组件卸载时移除事件监听器}, []);// 依赖数组为空，表示只在组件挂载和卸载时执行一次// 使用自定义 Hook 来获取组件宽度。

不建议用index作为key，比如在用index作key的情况下，当我们对原始的数据list进行了某些元素的顺序改变操作，导致了新旧集合中在进行diff比较时，相同index所对应的新旧的节点其文本不一致了，就会出现一些节点需要更新渲染文本，而如果用了其他稳定的唯一标识符作为key，则只会发生位置顺序变化，无需更新渲染文本，提升了性能。react diff算法通过新旧节点比较后，如果发现了key值相同的新旧节点，就会执行移动操作，而不会执行原策略的删除旧节点，创建新节点的操作。

React 实例从创建到销毁的全过程就是生命周期，钩子函数是指程序运行到特定阶段执行的方法。React 的生命周期在不断演进，在16.3版本前后有较大改变。

React 是单向数据绑定，当用户访问 View 时，通过触发 Events 进行交互，而在相应 Event Handlers 中，会触发对应的 Actions，而 Actions 通过调用 setState 方法对 View 的 State 进行更新，State 更新后会触发 View 的重新渲染。单向数据绑定：Model 的更新会触发 View 的更新，View 的更新不会触发 Model 的更新，它们的作用是单向的。有状态组件通常会带有生命周期lifecycle，用以在不同的时刻触发状态的更新。

MobX 是一个状态管理库，它提供了一种响应式的数据流方案，使得状态的变化能够自动地反映到相关的组件中。

组件传参

需求现在有一个在table里面做筛选的需求，在antd的table文档里很容易找到相关API，在官方的例子中是用filters定义菜单数据，用onFilter监控变化。官方例子：{title: 'Address',dataIndex: 'address',filters: [ { text: 'London', value: 'London', }, { text: 'New York', value: 'New York', },],on.

需求分析：用表格展示数据，当数据过大时，从时间和缓存上考虑，一次返回全部数据是不可取的。于是使用分页查询。前端每次点击切换页面的时候，带着当前页面参数向后端发请求，后端查询时用limit，只返回当前页面的数据，同时后端需返回一个count值计算所有要展示的数据量，供前端可展示页数（否则就只有一页）。前端react、antd，后端koa、sqlite。前端代码：首先在组件pagination内设置翻页回调函数，写在属性onChange里，该函数可以拿到当前页面和页面条数，带上这些参数向后端发请求。

有一个需求是可以使主表格里每一栏数据展开，在子table里显示与其相关的子数据项，展开的时候去向后台请求数据显示。用的组件库是Antd。首先我们看Antd官方文档的Table有嵌套子表格的功能，可见我们需要使用expandedRowRender参数，但是尝试在expandedRowRender函数中进行请求，会发现发出了连续的请求，所以我们把请求写在onExpand中，只在点击展开图表的时候发出一次。之后我们写onExpand函数，注意这里的参数要写上expanded，代表是展开还是合并，我之前