-
React的onMouseDown，onBlur和onClick执行顺序问题
最近在项目中遇到了一个因为onBlur和onClick执行顺序不同而造成的bug，希望同大家分享一下。原理当输入框有onBlur事件的时候，在触发onBlur事件的同时，点击按钮，会同时触发按钮的onClick事件和输入框的onBlur事件，而onBlur事件的顺序大于onClick事件，此时可能会造成一些bug。具体案例1. 初始状态2. 第一步输入错误信息并触发输入框的onBlur事件，表单提交按钮发生向下位移，位移高度为错误信息文字高度。3. 第二步随后输入正确信息，点击提交按钮，先...…
-
React 表单（Forms）详解
如果希望 React 的表单和 HML 表单的默认行为不一致，需要使用到一种称为“受控组件(Controlled Components)”的技术。受控组件在 HTML 中，表单元素如 input，select 等根据用户输入更新。而在 React 中，可变状态一般保存在组件的 state 属性中，并通过 setState()方法更新。我们可以通过是 React 的 state 成为”单一数据源”来结合这两个形式。然后 React 组件也可以控制在用户输入之后的行为。这种形式，其值由 Rea...…
-
React 片段（fragments）详解
一. 动机以下的例子简洁清晰的反映了 fragments 的作用，在生产过程中，经常会遇到这种情况：首先，是在 Table 组件中插入 Columns 组件：class Table extends React.Component { render() { return ( <table> <tr> <Columns /> </tr> ...…
-
React Lifecycle(生命周期)
按照我的理解，生命周期主要分为一下几个步骤： componentWillMount() 在组件第一次渲染之前调用，这个是在 render 方法调用前可修改 state 的最后一次机会。这个方法基本不会用到。 render() 渲染虚拟 dom。 componentDidMount() 在组件第一次渲染后立即调用。一般会在这个方法里执行 ajax，setinterval，settimeout 等方法。因为 ajax 是异步请求，如果在 componentW...…
-
React Reconciliation(调和)
动机当使用 React 时，在下一个 steate 或 props 更新时，render()函数将会返回一个不同的 React 树，接下来 React 会找出最高效地方式更新 UI。目前存在大量通用的方法能够以最少的操作步骤将一个树转化成另外一棵树。然而，这个算法是复杂度为 O(n3)，其中 n 为树中元素的个数。即如果有 1000 个元素，那么每次更新都要进行 10 亿次比较。然而，React 给予一下两个假设实现了复杂度为 O(n)的算法，即每次更新只需要进行 1000 次的比较： ...…