![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
codezha
这个作者很懒,什么都没留下…
展开
-
React setState使用注意事项
setState使用注意事项不要直接改变state直接对组件state中的属性赋值将不会触发DOM更新,react不知道state被改变了state的更新可能是异步的react会一次处理多个对setState的调用,从而提高性能,修正方式如下:调用setState的时候传入一个函数,而不是一个对象//错误用法this.setState({val:this.state.val ...原创 2019-04-24 16:09:35 · 320 阅读 · 0 评论 -
react生命周期钩子函数
react生命周期钩子函数挂载 组件被实例化并挂载在DOM树constructor()作用:组件被实例化时,构造函数就被最先执行,constructor第一行必须写super(props)语句,否则会报错应该:1.初始化组件的初始状态2.bind绑定函数,修正this指向(建议箭头函数修正)不应该:1.向后台发送请求并更新组件状态2.使用this.set...原创 2019-04-24 16:11:30 · 251 阅读 · 0 评论 -
react项目中实现带定位查询且高亮的列表查询
react项目中实现带定位查询且高亮的列表查询背景 项目中需要实现一个这样的组件,包含一个input输入框、一个查询按钮、一个高度固定,可以垂直滚动的数据列表,每一行数据有一个唯一的编号,需要实现在输入框中输入编号,点击查询,数据列表可快速滚动至对应行,且高亮。ant Design中没有这样的组件,所以需要使用原生JS实现。初始化项目//安装构建工具npm i...原创 2019-04-24 17:14:06 · 1383 阅读 · 0 评论 -
禁止浏览器自动填充用户名和密码
今天在项目中遇到了一个非常诡异的情况,在页面上点击修改密码后,主页面的分页组件中的页码跳转input框会自动填充当前登录用户名,经过多番查询和尝试,找到了问题的根本原因,浏览器对于用保存过的户名和密码有自动填充功能,关掉自动填充功能成功解决上述问题。方法一:设置autocomplete为off//用户名<input type="text" autoComplete="...原创 2019-06-03 15:10:36 · 8169 阅读 · 0 评论 -
react组件间通信
在根据需求实现业务的时候,我们经常会遇到组件间互相跳转和通信的问题,在具体实现业务逻辑的时候,我们会遇到各种组件间通信的情况,通过属性传递和props来解决组件间通信是比较常用的方法。父子父子向子组件通信 (属性传值)Parent.jsximport React, { Component } from 'react';import Child from './Child';...原创 2019-06-20 16:16:42 · 124 阅读 · 0 评论 -
react 虚拟 DOM Diff 算法
React 中最吸引开发人员的就是虚拟 DOM和高效的 Diff 算法,优化了因为多次刷新页面带来的性能问题,开发人员也无需频繁操作DOM,从性能角度来说有很大的提升。什么是虚拟 DOM Diff 算法? 在react中render执行的结果并不是真正的DOM节点,而是虚拟DOM,当页面发生变化时,需要通过Diff算法对比变化前后的虚拟DOM,从而更新视图。...原创 2019-07-03 18:11:50 · 172 阅读 · 0 评论