随笔分类 -  React

1 2 下一页
如何使用React-redux
摘要：一、react redux中 Provider 核心API Provider就是一个组件，在Provider组件上通过store={ store }与provider组件进行了关联，因此在Provider内部的组件都可以获取到store里的内容 二、react redux中 connect 核心AP 阅读全文
posted @ 2020-03-01 15:44 Nayek 阅读(359) 评论(0) 推荐(0)
使用Redux-saga中间件实现ajax数据请求
摘要：github（redux saga）：https://github.com/redux saga/redux saga redux saga和redux thunk两种对异步数据的处理风格不同 redux saga：单独将异步操作的逻辑单独放在一个单独的文件里 redux thunk：将异步操作放到 阅读全文
posted @ 2020-03-01 12:58 Nayek 阅读(601) 评论(0) 推荐(0)
什么是Redux的中间件
摘要：redux的中间件的中间指的是action和store的中间 之前redux中的action只能是一个对象，所以action是一个对象直接派发给了store 但是现在，当我们使用了redux thunk的时候，action可以是一个函数了，所以中间件就是对dispatch的一个封装，或者说是对dis 阅读全文
posted @ 2020-03-01 12:24 Nayek 阅读(330) 评论(0) 推荐(0)
使用Redux-thunk中间件实现ajax数据请求
摘要：github（redux thunk）：https://github.com/reduxjs/redux thunk 重点：之前只用redux的话actionCreator中的方法返回的action只能是一个对象，再使用redux thunk之后就可以返回一个函数了 优点：将异步数据放在action 阅读全文
posted @ 2020-03-01 12:13 Nayek 阅读(356) 评论(0) 推荐(0)
Redux中发送异步请求获取数据
摘要：一、在componentDidMount中进行异步数据的获取 二、通过initListAction创建action 三、然后再通过store.dispatch派发给store 四、store再自动转发给reducer 五、reducer通过深拷贝处理数据后，再将newState返回给store 阅读全文
posted @ 2020-03-01 11:50 Nayek 阅读(1306) 评论(0) 推荐(0)
React之无状态组件
摘要：React之无状态组件可以TodoListUI组件对比 无状态组件的优点：性能更高，因为他就是一个函数，TodoLIstUI组件是一个类，还需要执行其中的生命周期函数 阅读全文
posted @ 2020-02-29 15:25 Nayek 阅读(950) 评论(0) 推荐(0)
React之UI组件（将render部分的JSX模板拆分出来）和容器组件 （拆分JSX后剩余的逻辑部分）
摘要：UI组件 容器组件 阅读全文
posted @ 2020-02-29 15:19 Nayek 阅读(577) 评论(0) 推荐(0)
React之生命周期函数（16.3以后新版本）
摘要：学习链接: https://www.jianshu.com/p/514fe21b9914 学习链接：https://zhuanlan.zhihu.com/p/38030418 学习链接：https://medium.com/@baphemot/understanding react react 16 阅读全文
posted @ 2020-02-28 00:37 Nayek 阅读(260) 评论(0) 推荐(0)
React之Redux知识点补充
摘要：一、 reducer纯函数方便自动化测试 二、 阅读全文
posted @ 2020-02-28 00:28 Nayek 阅读(95) 评论(0) 推荐(0)
React报错：Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
摘要：React报错： 报错原因List.Item的Item写成了item，小写的i 阅读全文
posted @ 2020-02-27 00:09 Nayek 阅读(12864) 评论(0) 推荐(0)
React之Redux概念简述，以及工作原理
摘要：一、React的Redux相当于Vue的Vuex 二、Redux工作原理 三、使用createStore创建store （图书管理员） 四、借书的人（组件上绑定事件函数）和借书人说的话（创建action，并通过dispatch派发给store） 代码 五、store（查阅） reducer（图书馆手 阅读全文
posted @ 2020-02-26 22:05 Nayek 阅读(716) 评论(0) 推荐(0)
React中的性能优化
摘要：1. 作用域的修改放在constructor中 2. setState异步函数 setState内置了性能优化的机制,它是一个异步函数,可以把多次的数据改变结合成一次来做,这样的话降低虚拟DOM的对比频率，来提高性能 3.虚拟DOM React底层运用了虚拟DOM，他还有同层比对，key值的调用，来 阅读全文
posted @ 2020-02-25 23:54 Nayek 阅读(827) 评论(0) 推荐(0)
React生命周期函数的使用场景
摘要：使用shouldComponentUpdate( ) 生命周期函数，减少render函数的执行，减少对未发生改变的DOM结点的重复渲染。 若从父组件传来的content内容未发生改变则返回false（此部分查看React中生命周期函数文章） 阅读全文
posted @ 2020-02-25 23:47 Nayek 阅读(247) 评论(0) 推荐(0)
React中的生命周期函数（老版本V16.0之前）
摘要：React的生命周期函数 什么是生命周期函数：生命周期函数是指在某一个时刻组件会自动调用执行的函数 Initialization：初始化 执行Constructor，初始state和props Mounting ( 挂载处理 ) componentWillMount( ) : 在组件即将被挂载到页面 阅读全文
posted @ 2020-02-25 20:44 Nayek 阅读(371) 评论(0) 推荐(0)
React中ref的使用
摘要：直接获取DOM元素时使用的，一般情况下尽量不要使用ref 阅读全文
posted @ 2020-02-25 14:26 Nayek 阅读(170) 评论(0) 推荐(0)
React中setState注意事项
摘要：setState是一个异步函数，异步获取数据 学习react在使用ref和setState操作DOM时会遇到的问题： ref获取ul结点元素 错误写法：得到的ul长度总是上一次输入后的长度 结果： 正确写法：setState异步函数第二个回调函数在第一个参数执行完成后执行 结果： 阅读全文
posted @ 2020-02-25 14:18 Nayek 阅读(252) 评论(0) 推荐(0)
React之虚拟DOM中的Diff算法
摘要：一、React中的setState ( 异步函数，异步获取数据 ) 若操作的时间间隔短，它可以将多个setState结合成一个setState，减少虚拟DOM的比对次数，提高性能 二、同层虚拟DOM对比算法 如果有一层DOM更改了，接下去的DOM结点就不比对了，直接从此结点开始更新以及此结点以下的D 阅读全文
posted @ 2020-02-25 13:52 Nayek 阅读(245) 评论(0) 推荐(0)
React之深入了解虚拟DOM
摘要：JS在手机中也可运行，React Native通过将虚拟DOM转换为底层的原生组件，即可在手机端运行，在浏览器运行时，只需要将虚拟DOM转换为真实DOM即可运行,虚拟DOM就是将真实DOM转换为JS对象的写法。 阅读全文
posted @ 2020-02-25 11:25 Nayek 阅读(160) 评论(0) 推荐(0)
React中的虚拟DOM
摘要：假设react的过程： 第一种方案： 第二种方案： 第三种方案（虚拟DOM方案）： React中虚拟DOM的执行顺序： 阅读全文
posted @ 2020-02-25 10:55 Nayek 阅读(121) 评论(0) 推荐(0)
React之props、state和render函数的关系
摘要：1、当组件中的state或者props发生改变的的时候，render函数就会被重新执行 2、当父组件的render函数被运行时，它的子组件的render都将被重新运行一次 3、子组件作为父组件里的一个组件时，父组件render函数运行，子组件render函数也将被运行 阅读全文
posted @ 2020-02-25 10:45 Nayek 阅读(295) 评论(0) 推荐(0)

1 2 下一页