ReactRouter的哲学
March 31, 2020
机翻文档，新版的react-router是动态路由，它与传统的静态路由在使用上有很大的不同
knowledge
元素与组件
November 24, 2018
原文链接： React Components, Elements, and Instances 什么是React元素(element)？ # 元素(element)是描述组件实例或DOM节点及其所需属性的普通对象这个对象仅仅包含了有关组件类型、属性、子元素的信息。 元素不是实际的实例。相反，它是一种告诉React你想在屏幕上看到什么的方法。你不能在元素上调用任何方法。它只是一个带有两个字段的不可变描述对象：type:(string | ReactClass) 和 props: Object 。 可以把一个这样的DOM节点描述成下面这样的对象，这个对象就叫元素（element） 1 2 3 4 5 6 7 { type: 'div', props: { children: 'Login', id: 'login-btn' } } 元素可以通过createElement方法创建。 DOM元素 # 当element的type为英文字符串时，它表示同名的DOM节点，element的props对应其属性。这就是React将呈现的内容。例如： 1 2 3 4 5 6 7 8 9 10 11 12 { type: 'button', props: { className: 'button button-blue', children: { type: 'b', props: { children: 'OK!' } } } } 此元素只是将以下HTML表示为普通对象的一种方法： ...
Diff
November 17, 2018
React Element # 首先我们要知道react的diff比较的是新旧两颗 react element 树。那什么是 react element 呢？ react element 是一个普通对象，它描述组件实例或DOM节点。 它是这样的 1 2 3 4 5 6 7 { type: 'div', props: { children: 'Login', id: 'login-btn' } } 或这样的（区别是type一个是字符串，一个是函数或类） 1 2 3 4 5 6 7 { type: Button, props: { color: 'blue', children: 'OK!' } } React.render()方法，会把 react element 解析成所有type都是字符串（DOM标签），形成一棵虚拟DOM树。 当 state 或 props 更新时，render方法会解析出另一个树。React不会直接将新的树渲染为真实的DOM，而是找出新旧树之间的差异，只更新差异部分的真实DOM。这个“找出新旧树之间的差异”的算法就是diff。 如果直接比较两颗树，算法的时间复杂度为O(n3) ，不使用于react的场景。 React基于两点假设，实现了一个复杂度为O(n)的算法： 两个不同类型的元素将产生不同的树。 开发人员可以通过key参数提示哪些子元素可以在不同渲染中保持稳定。 实践中，上述假设适用于大部分应用场景。 diff算法 # 在对比新旧两棵树时，React首先比较两个根元素的类型，然后根据两个元素的类型采取不同的行动。 ...