![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端框架
文章平均质量分 53
Colin_me
我为何要退却,未曾努力,还奢望得到什么?
展开
-
VueJs探索之watch用法详解
Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。具体的用法可以直接看下面的示例,简单直接。 var vm = new Vue( { el: '#app', data: {转载 2017-10-11 23:06:23 · 248 阅读 · 0 评论 -
高效的 MobX
前言由于最近开启一个新的个人小项目,准备还是使用 React 及其生态来实现整个技术架构,之前一直使用的是 React + React-Router + Redux 组合,虽然说使用 Redux 来管理整个应用的数据流有着优点,但是 Redux 的写法繁琐也确实让人诟病,当然这里并不是说 Redux 不好。基于项目本身并不大,决定寻找一个新的解决方案,而 MobX 在之前就有所耳闻(只是一直...转载 2019-01-09 22:59:34 · 833 阅读 · 0 评论 -
React组件之间通讯
父子之间通讯父子之间通讯又分为父->子,子->父。因为react单向数据流向的缘故,父->子通信的话直接通过props。父组件数据变动,直接传递给子组件。子->父组件之间就要通过回调函数来通信了,父组件传递一个回调函数给子组件,子组件通过调用此函数的方式通知父组件通信。跨级组件通信react为了实现祖先组件和后辈组件之间的通信问题,引入了contextA...原创 2019-01-02 21:24:23 · 243 阅读 · 0 评论 -
combineReducers 进阶之不同 reducers 之间共享数据
如果 sliceReducerA 为了处理特殊的 action 正好需要来自 sliceReducerB 的部分 state 数据,或者 sliceReducerB 正好需要全部的 state 作为参数,单单就 combineReducers 是无法解决这种问题的。可以这样来解决:把所需数据当额外参数的形式传递给自定义函数,例如:function combinedReducer(state,...原创 2018-12-18 23:56:27 · 1179 阅读 · 0 评论 -
Redux三大原则
三大原则单一数据源整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。这让同构应用开发变得非常容易。来自服务端的 state 可以在无需编写更多代码的情况下被序列化并注入到客户端中。由于是单一的 state tree ,调试也变得非常容易。在开发中,你可以把应用的 state 保存在本地,从而加快开发速度...原创 2018-12-11 23:08:13 · 1484 阅读 · 0 评论 -
Redux之可记忆的Selector
如果 state tree 非常大,或者计算量非常大,每次更新都重新计算可能会带来性能问题。Reselect 能帮你省去这些没必要的重新计算。我们需要一个可记忆的 selector 来替代这个 getVisibleTodos,只在 state.todos or state.visibilityFilter 变化时重新计算 todos,而在其它部分(非相关)变化时不做计算。Reselect ...原创 2018-12-16 18:35:56 · 2049 阅读 · 0 评论 -
create-react-app中添加less支持
使用 create-react-app 脚手架创建项目后,默认是不支持 less 的。所以我们需要手动添加。第一步 暴露webpack配置文件使用 create-react-app 创建的项目,默认情况下是看不到 webpack 相关的配置文件,我们需要给它暴露出来,使用下面命令即可:npm run eject运行之后,我们发现多了一个config文件夹这样就可以修改 web...原创 2018-12-10 14:11:56 · 412 阅读 · 0 评论 -
Redux基础
ActionAction 是把数据从应用(译者注:这里之所以不叫 view 是因为这些数据有可能是服务器响应,用户输入或其它非 view 的数据 )传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。Action 本质上是 JavaScript 普通对象。我们约定,action 内必须使用一...原创 2018-12-12 17:01:08 · 103 阅读 · 0 评论 -
React 性能优化
总结一下react性能优化相关知识:避免重复渲染:当一个组件的props或者state改变时,React通过比较新返回的元素和之前渲染的元素来决定是否有必要更新实际的DOM。当他们不相等时,React会更新DOM。在一些情况下,你的组件可以通过重写这个生命周期函数shouldComponentUpdate来提升速度, 它是在重新渲染过程开始前触发的。 这个函数默认返回true,可使Re...原创 2018-12-07 23:18:32 · 116 阅读 · 0 评论 -
ReactDOM
如果你用一个<script>标签导入React, 所有的顶阶的API都能在ReactDOM的全局范围内被调用。 如果你用的是 npm搭配ES6标准,你可以用import ReactDOM from 'react-dom'。如果是npm和ES5,你可以用var ReactDOM = require('react-dom')。render()ReactDOM.render( e...原创 2018-12-04 16:01:26 · 1023 阅读 · 0 评论 -
React 事件处理
React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同:React事件绑定属性的命名采用驼峰式写法,而不是小写。 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)你必须谨慎对待 JSX 回调函数中的 this,类的方法默认是不会绑定this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, ...原创 2018-12-04 12:27:58 · 169 阅读 · 0 评论 -
React中setState真的是异步的吗
在学习react的过程中几乎所有学习材料都会反复强调一点setState是异步的,来看一下react官网对于setState的说明。将setState()认为是一次请求而不是一次立即执行更新组件的命令。为了更为可观的性能,React可能会推迟它,稍后会一次性更新这些组件。React不会保证在setState之后,能够立刻拿到改变的结果。一个很经典的例子如下// state.cou...转载 2019-06-09 23:27:34 · 812 阅读 · 0 评论