reactjs
Gavin13140
这个作者很懒,什么都没留下…
展开
-
写 React / Vue 项目时,数据列表中的key,用数组下标还是唯一值id或不写呢?
React与Vue原理一致,以Vue为列进行介绍key不写与key使用数组下标的区别key不写与使用数组下标作用一致。都是采默认使用“就地更新”的侧脸。当 Vue 正在更新使用 v-for 渲染的元素列表时,它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。这个默认的模式是高效...原创 2019-10-28 10:00:58 · 1260 阅读 · 0 评论 -
ReactJS组件生命周期(ES5为例)
在组件的整个生命周期中,随着该组件的props或者state发生改变,其DOM表现也会有相应的变化。一个组件就是一个状态机。一个React组件的生命周期分为三个部分:实例化、存在期和销毁时。实例化当组件在客户端被实例化,第一次被创建时,以下方法依次被调用: 1、getDefaultProps 2、getInitialState 3、componentWillMount 4、render 5原创 2016-08-23 23:10:30 · 1089 阅读 · 0 评论 -
react webpack 按需加载初试
react webpack 按需加载初试1:为什么要按需加载【直接打包】React实现单页面运用时,当项目较小或者页面较少的情况下可以无需打包成多个文件,因为即使前端代码有10M,在通过webpack压缩打包,再通过GZIP压缩后一般也就400k,在一面正常的pc系统中400k的大小是可接受的。【按需加载】但当你的应用稍微复杂一点点,包括依赖后,打包后的文件都是挺大的。而我们加载的时候,不管那些原创 2016-12-02 18:55:27 · 6578 阅读 · 0 评论 -
immutable.js
ReactJs 性能React.js是一个UI = f(states)的框架,为了解决更新的问题,React.js使用了virtual dom,virtual dom通过diff修改dom,来实现高效的dom更新。对于react的来说,如果父组建有多个子组建。当父组建render。下面的子组建都得跟着render。可是很多子组建里面是冤枉的啊!!很多子组建的props 和 state 然而并没有改变原创 2016-08-07 20:03:14 · 1370 阅读 · 6 评论 -
ReactJS性能优化(上)
shouldComponentUpdate?详情先参考InfoQ上什么时候要在React组件中写shouldComponentUpdate? React已经替我们实现了一个shouldComponentUpdate,原理其实非常简单,组件在决定重新渲染(虚拟dom比对完毕生成最终的dom后)之前会调用该函数,该函数将是否重新渲染的权限交给了开发者,该函数默认直接返回true,表示默认直原创 2016-12-07 23:10:11 · 1539 阅读 · 0 评论 -
Reactjs性能优化(下)
React 实现pure render的时候,bind(this)导致re-render?先上代码:export default class extends Component {...render() {const {name,age} =this.state;return ( //bug 所在 )}...}发现一个问题,对于Person这个原创 2016-12-08 20:53:11 · 738 阅读 · 0 评论 -
ReactJs性能优化(中)
提到ReactJS性能优化,不得不提immutablejs性能优化神器~ Facebook 工程师打造,与 React 同期出现,但没有被默认放到 React 工具集里(React 提供了简化的 Helper)。它内部实现了一套完整的 Persistent Data Structure,还有很多易用的数据类型。像 Collection、List、Map、Set、Record、Seq。有非常全面原创 2016-12-07 23:12:44 · 1074 阅读 · 0 评论