相信大家在日常中使用的最多的还是函数式组件和 React.Component 组件吧，今天就简单的说下函数式组件的两个优化方法。 在谈到函数式组件之前我们先看一个概念 - 纯函数。 引用一段维基百科的概念。 可以看到，纯函数有着相同的输入必定产生相同的输出，没有副作用的特性。 …

首先欢迎大家关注我的Github博客，也算是对我的一点鼓励，毕竟写东西没法获得变现，能坚持下去也是靠的是自己的热情和大家的鼓励，希望大家多多关注呀！从今年年初离开React开发岗，React就慢慢淡出我的学习范围。现在想重拾一下React相关的知识，可能文章所提及的知识点已经算…

react在进行组件渲染时，从setState开始到渲染完成整个过程是同步的（“一气呵成”）。如果需要渲染的组件比较庞大，js执行会占据主线程时间较长，会导致页面响应度变差，使得react在动画、手势等应用中效果比较差。 为了解决这个问题，react团队经过两年的工作，重写了r…

下面是我阅读过源码后，将所有的执行流程总结出来的流程图，不会贴代码，如果你想阅读代码看看具体是如何实现的，可以根据流程图去源码里寻找。 组件装载 / 更新。 通过lastProps、nextProps判断是否新增、删除事件分别调用事件注册、卸载方法。 获取document对象。…

1. React Hooks 2. 解决的问题 3. 注意事项 4. useState useState会返回一对值：当前状态和一个让你更新它的函数，你可以在事件处理函数中或者其他一下地方调用这个函数。它类似class组件的this.setState，但是它不会把新的state…

我工作中的技术栈主要是 React + TypeScript，这篇文章我想总结一下如何在项目中运用 React 的一些技巧去进行性能优化，或者更好的代码组织。 性能优化的重要性不用多说，谷歌发布的很多调研精确的展示了性能对于网站留存率的影响，而代码组织优化则关系到后续的维护成本…

1. 函数式更新 除了常规的setState(value)的方式去更新状态以外，setState还可以接收一个函数来更新状态。这种更新状态的方式通常使用在新的 state 需要通过使用先前的 state 计算得出的场景。 但是依赖项设置后会导致每次改变发生时定时器都被重置，这并…

JSX本质是什么..... 这里打印出来的Event对象是 React 封装过的SyntheticEvent，可以看__proto__.constructor。React 标准化了事件对象，因此在不同的浏览器中都会有相同的属性。 React 中事件绑定跟 Vue 中完全不同，V…

每次提及 Hook 时，只能说得出 useState 以及 useEffect 来。是得好好总结总结，全面认识 Hook 。 自定义 Hook ，常见 Hook 的实现。 React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进…