react
少油少盐不要辣
趁着年轻,去折腾,去改变吧
展开
-
react生命周期函数
1.什么是生命周期函数生命周期方法,用于在组件不同阶段执行自定义功能。在组件被创建并插入到 DOM 时(即挂载中阶段(mounting)),组件更新时,组件取消挂载或从 DOM 中删除时,都有可以使用的生命周期方法。2.react生命周期图谱3.阶段解读挂载阶段什么是挂载?挂载是组件第一次被放到页面上的时候。(1) componentWillMount()在组件即将被挂载到页面的时候自动执行。(2) render()组件挂载阶段。(3) componentDidMount()组件原创 2020-08-13 21:06:15 · 178 阅读 · 0 评论 -
React高阶组件实例应用
1.为何使用高阶组件实现逻辑复用,例如:用户对页面按钮操作的权限控制。2.什么是高阶组件React官网:具体而言,高阶组件是参数为组件,返回值为新组件的函数。3.应用场景鉴权判断举个栗子:下面代码是三块:1.页面按钮所在的组件 2.封装了鉴权逻辑的高阶组件 3.公共按钮组件1.页面按钮所在的组件(假设是学校编辑学生档案的组件)class EditPaper extends React.Component { constructor(props) { super(p原创 2020-07-12 11:32:39 · 910 阅读 · 0 评论 -
react-redux 中获取子组件(被包装的木偶组件)的实例
1.refs使用场景在某些情况下,我们需要在典型数据流之外强制修改子组件,被修改的子组件可能是一个 React 组件的实例,也可能是一个 DOM 元素,例如:管理焦点,文本选择或媒体播放。如下面这样: focusTextInput() { // 直接使用原生 API 使 text 输入框获得焦点 // 注意:我们通过 "current" 来访问 DOM 节点 ...原创 2020-05-07 14:28:56 · 619 阅读 · 2 评论 -
react组件卸载后,该组件产生的异步操作还在,导致错误
1.报错信息原创 2020-03-20 09:21:24 · 884 阅读 · 0 评论 -
react项目中引入es6的async语法报错
1.报错信息就是要将es6转为es5的语法。2.如何解决。原创 2020-03-15 22:40:43 · 659 阅读 · 0 评论 -
react项目css样式错乱,带来的思考
1.为什么出现了错乱?起初,项目中的每个组件的样式使用less语法写的,为了避免编译后,出现样式覆盖的问题。元素的类名使用的是文件名打头 。后来,我引入了ant-desginUI框架。结果发现,由它带来的重置css样式,覆盖了我自己的css样式。覆盖的根本原因是:我自己的css样式,是被webpack编译到main.css文件中的,由link标签引入的。而ant-desgin带来的css样式...原创 2020-03-15 22:37:55 · 2196 阅读 · 0 评论 -
react受控组件和非受控组件
1.受控组件什么是受控组件?个人认为需要满足两个条件:(1)编写state维护表单元素的数据。(2)需要根据用户的输入,编写数据处理函数(比如:onChange={(e) => {this.onChangeValue('userName', e);}})。应用场景它的条件就体现了其应用场景:(1)需要修改用户的输入。如:将输入的字母变成大写的。(当然,这个也可以通过非受控组件来实...原创 2020-03-03 22:46:27 · 207 阅读 · 0 评论 -
React中的Context使得不同层级组件共享数据
context是什么Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。Context 设计目的是为了让组件共享那些对于一个组件树而言是“全局”的数据,例如当前认证的用户、主题或首选语言。为什么用context在一个典型的 React 应用中,数据是通过 props 属性自上而下(由父及子)进行传递的,但这种做法对于某些类型的属性而言是极其...原创 2020-01-10 23:14:53 · 842 阅读 · 0 评论 -
react生命周期钩子componentDidMount()
componentDidMount()componentDidMount() 会在组件挂载后(插入 DOM 树中)立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据,此处是实例化请求的好地方。这个方法是比较适合添加订阅的地方。如果添加了订阅,请不要忘记在 componentWillUnmount() 里取消订阅若组件不会再次插入到DOM树中,则该生命周期函数只会调...原创 2019-12-23 14:23:45 · 2639 阅读 · 0 评论 -
react项目报出警告Warning: Cannot update during an existing state transition (such as within `render`).
在一次写react项目中,报出如下警告,如图:意思大概为:在一次改变state或者props值后,触发render()方法执行,重新渲染DOM的过程中,react不允许再有其他的state或者props值的改变。render()方法必须是纯函数!!!,不能改变其作用域之外的某变量。我当时写的代码如下: handleClick = () => { this.pro...原创 2019-12-07 13:55:56 · 25197 阅读 · 0 评论 -
react项目引入文件错误
先看错误意思为:在src文件夹下找不到redux/index我在src文件夹下的index.js引入该文件下的redux文件夹下的index.js文件方式如下:结果就是上面那个错误,百思不得其解。最后,发现加上./即可,即:./redux/index。...原创 2019-08-08 23:23:59 · 1362 阅读 · 0 评论