wangruiStart

重点内容： key只在重新渲染时生效 key一致时，React不会移除，重新挂载DOM。也就不会触发组建的render和mounted事件。同时组件内部维护的state也能维持。只会根据props更新

推荐看原文 性能和React！这是一个有趣的话题，关于这个话题的很多争议和最佳实践在短短6个月内就会发生变化。既然如此，在这方面是否可能说出任何明确的观点或提出一些概括性的建议呢？ 通常，性能专家都主

抛开class的历史包袱， hook的有点不谈。我们直接切入正题： 用Function组件代替class 组件。 我们不妨畅想一下最终的支持状态的函数组件代码： 上述代码使用函数组件定义了一个计数器组

javascript是一个单线程语言，同一时间只能执行一个任务。 对于javascript的事件处理机制，我们可以简单理解成“主线程+任务队列”模式。主要步骤如下 （1）所有同步任务都在主线程上执行，形成一个执行栈。 （2）主线程之外，还存在一个 "任务队列"（task que…

我们在前面推导过程中实现了一个简单版的watcher。这里面还有一些问题 所谓的同步更新是指当观察的主体改变时立刻触发更新。而实际开发中这种需求并不多，同一事件循环中可能需要改变好几次state状态，但视图view只需要根据最后一次计算结果同步渲染就行（react中的setSt…

我们创建的原始类型、对象、函数等等，都会占用内存。为了防止溢出，我们就需要对不用的数据进行删除。这就是垃圾回收。 JavaScript 内存管理的关键概念是可触及（Reachability）。 我的理解就是还处于被引用状态。 将全局(无论是window还是global)比作树根…

对React熟悉的同学都知道，React中的事件机制并不是原生的那一套，事件没有绑定在原生DOM上，发出的事件也是对原生事件的包装。 那么这一切是怎么实现的呢？ 首先还是看我们熟悉的代码 这是我们在React中绑定事件的常规写法。经由JSX解析，button会被当做组件挂载。而…

这是我们在组件中书写的样式。我们知道，在HTML中这是个DOM节点，但是在React会经由jsx转化为React.createElement(...) 所以，这里其实相当于一个函数。 巴拉巴拉的细节逻辑就不看了，总之呢就是生成了一个ReactElement对象，而ref会保存为…

前面写过一篇setState漫谈(一)谈论了用户操作到页面渲染的过程，相信大家对React的setState机制有了一定了解。这里我们看看setState在生命周期的各个流程里调用都会发生什么。 结论： componentWillReceiveProps中安心调用，对state…