react
文章平均质量分 86
haoyanyu_
这个作者很懒,什么都没留下…
展开
-
业务代码codereview规范
为什要要codereview新功能开发好上线前,一般都要进行codereview,在codereview过程中,可以发现一些问题,提早规避线上问题或故障;也可以规范代码,大家互相学习和进步。codereview原则先看代码可读性和规范性,其次再考虑抽象和复用,最后考虑性能comments不能省略,留下记录很重要,最好是面对面codereview每次review的规模不应该太大,200行左右,不要超过800行虚心接收别人的comments常规问题检查代码是否能实现预期功能代码格式是否规原创 2021-03-10 17:20:21 · 440 阅读 · 0 评论 -
React Hook之useCallback和useMemo的使用和源码分析
如何使用感觉useCallback和useMemo两者很像,前者返回一个memorized的回调函数,后者返回一个memorized的值。看一下他们是如何定义的useCallback接受一个回调函数和依赖项数组作为参数,返回回调函数的memorized版本// useCallbackuseCallback<T>(callback: T, deps: Array<mixed> | void | null): T当这个回调函数传递给自组件时,可以用useCallbac原创 2020-06-15 16:57:56 · 893 阅读 · 0 评论 -
React Hook之useEffect的使用和源码分析
作用副作用前端开发中的副作用一般有:dom操作、浏览器事件的绑定和取消绑定、http请求、打印日志、访问系统状态、执行IO更新等。在class类组件中,副作用一般写在componentDidMount,componentDidUpdate, componentWillUnMount, componentWillUpdate里,但是函数组件没有生命周期,这个时候就可以用useEffect来解决了,这一个hook可以替代以上四个生命周期;useEffect的使用useEffect是组件第一次渲染和每次原创 2020-06-07 22:06:59 · 903 阅读 · 1 评论 -
React Hook 遇到的小坑--持续记录
1. 依赖项没指定好hook是利用闭包的特性来生成对应的方法;当不传依赖项,方法内部的状态值都是取的在定义hook的初始值;当传入了依赖项,那么依赖项值发生改变,hook会被更新,这个时候它内部用的变量也都会更新到最新。所以,如果hook里用了状态变量,一定要记得作为依赖项传入,否则会遇到坑哦。尤其是hook之间互相调用的时候,很容易指定不好依赖项。如下例子:本意:merchantChartQuery作为fetchOrder的依赖项,控制fetchOrder的更新。当执行setCpsOrder原创 2020-06-07 21:25:27 · 1062 阅读 · 0 评论 -
React Hook之useState、useReducer的使用和源码分析
React Hook16.8以前一般使用类组件或者函数组件;前者有完整的生命周期API,可以管理组件状态,但是this指向在使用时需要格外注意一;一般通过HOC实现复用;通过shouldComponentUpdate()或者PureComponent组件进行性能优化,防止不必要的更新。后者是函数组件,一般是传入的数据进行展示,没有生命周期,只有props,是无状态组件;16.8以后新增了React Hook特性,它是函数组件,但是通过hook钩子可以管理内部状态,而且可以调用生命周期;通过钩子的原创 2020-05-25 19:35:01 · 1287 阅读 · 0 评论 -
mockjs在项目中的使用方法详解
Mockjs是一个模拟数据生成器,用于帮助前端开发,使其独立于后端进程,并减少一些单调性,特别是在编写自动化测试时。一、项目实战1. 安装mockjsnpm install mockjs --save-dev2. 引入mockjs,模拟数据// 新建一个mock.js文件import Mock from 'mockjs';const { Random } = Mock;cons...原创 2020-02-29 23:02:57 · 1643 阅读 · 0 评论 -
React系列:React的生命周期
React声明周期React组件的生命周期可以分为挂载,渲染,卸载几个阶段。组件挂载时:class App extends Component { static propTypes = { // ... }; static defaultProps = { // ... }; constructor(props) { super(props); this.sta...原创 2019-09-25 10:21:31 · 134 阅读 · 0 评论 -
React系列: setState以及setState更新机制
在React中,数据是自顶向下单向流动的,即从父组件到子组件。这样组件之间的关系变得简单并且可预测。state和props是React组件中最重要的改建,如果顶层组件初始化props, 那么React会向下遍历整颗组件树,重新尝试渲染所有的子组件。而state只关心每个组件自己内部的状态,这些状态只能在组件内部改变。当组件内部使用内置方法setState时,该组件就会尝试重新渲染,因为我们改变...原创 2019-09-27 14:57:41 · 2067 阅读 · 0 评论 -
React系列:组件性能优化 (shouldComponentUpdate, PureComponent, PureRender, Immutable)
react中有时候会有一些不必要的render,例如:1. 父组件传递props给子组件,即使props没有更新,子组件也会重新render;2. setState两次值相同,也会render优化方法1. shouldComponentUpdateshouldComponentUpdate接受两个参数,要更新的props和state, 返回true或者false来确定是否要执行render;...原创 2019-09-18 17:51:02 · 379 阅读 · 0 评论 -
React系列: redux - bindActionCreators的使用方法
react-redux的connect方法接受4个参数:mapStateToProps(state, [ownProps]) 接受完整的redux状态树作为参数,返回对象的所有key都会成为组件的propsmapDispatchToProps(dispatch, [ownProps]) 接受redux的dispatch方法作为参数,返回当前组件相关部分的action creator并可以在...原创 2019-09-17 15:26:24 · 1490 阅读 · 0 评论 -
react 组件动画 react-addons-css-transition-group
安装插件npm install react-addons-css-transition-group引入插件import ReactCSSTransitionGroup from 'react-addons-css-transition-group';基础用法 用ReactCSSTransitionGroup标签包裹住要添加动画效果的react组件<Rea...原创 2018-12-13 15:33:54 · 3481 阅读 · 0 评论